diff --git a/app.config.environment.alpha.js b/app.config.environment.alpha.js
index e0c4b0b3eef2dc34174673b70fb38d0e48f04934..e680fd5fe34aecf8b46d111a9f994b4cc5721dbc 100644
--- a/app.config.environment.alpha.js
+++ b/app.config.environment.alpha.js
@@ -19,6 +19,12 @@ module.exports = {
       __STACK_ASSETS__: target !== 'mobile',
       __PIWIK_TRACKER_URL__: JSON.stringify('https://statweb.grandlyon.com/'),
       __PIWIK_SITEID__: 117,
+      __SAU_LINK__: JSON.stringify(
+        'https://portail-citoyen-sau.guichet-recette.grandlyon.com/ecolyo/'
+      ),
+      __SAU_IDEA_DIRECT_LINK__: JSON.stringify(
+        'https://demarches-sau.guichet-recette.grandlyon.com/retour-ecolyo/ecolyo-une-idee/'
+      ),
     }),
   ],
   optimization: {
diff --git a/app.config.environment.dev.js b/app.config.environment.dev.js
index 31cbe4a8ce3c192dae0a38450fa5cfafbb4af6aa..8895164f726f60d89a213300d4ee17fd0192a3e5 100644
--- a/app.config.environment.dev.js
+++ b/app.config.environment.dev.js
@@ -23,6 +23,12 @@ const stackProvidedLibsConfig = {
       __STACK_ASSETS__: true,
       __PIWIK_TRACKER_URL__: JSON.stringify('http://localhost:9800/'),
       __PIWIK_SITEID__: 1,
+      __SAU_LINK__: JSON.stringify(
+        'https://portail-citoyen-sau.guichet-recette.grandlyon.com/ecolyo/'
+      ),
+      __SAU_IDEA_DIRECT_LINK__: JSON.stringify(
+        'https://demarches-sau.guichet-recette.grandlyon.com/retour-ecolyo/ecolyo-une-idee/'
+      ),
     }),
   ],
   module: {
diff --git a/app.config.environment.prod.js b/app.config.environment.prod.js
index 7dc15dbcfe681d98d64c73b52327f5c51f27a5f1..b09cab9e863a406de56d3e822c0f1efe26475110 100644
--- a/app.config.environment.prod.js
+++ b/app.config.environment.prod.js
@@ -19,6 +19,10 @@ module.exports = {
       __STACK_ASSETS__: target !== 'mobile',
       __PIWIK_TRACKER_URL__: JSON.stringify('https://statweb.grandlyon.com/'),
       __PIWIK_SITEID__: 118,
+      __SAU_LINK__: JSON.stringify('https://support.grandlyon.com/ecolyo/'),
+      __SAU_IDEA_DIRECT_LINK__: JSON.stringify(
+        'https://demarches-support.grandlyon.com/retour-ecolyo/ecolyo-une-idee/'
+      ),
     }),
   ],
   optimization: {
diff --git a/jest.config.js b/jest.config.js
index b6a027a5b05f2f8316ff6f26570db8a860f997be..fa3e2586f69e2a0ee6608cfffed34b95f8c210f8 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -19,6 +19,10 @@ module.exports = {
     __ALLOW_HTTP__: false,
     __TARGET__: 'browser',
     __PIWIK_TRACKER_URL__: 'http://localhost:9800/',
+    __SAU_LINK__:
+      'https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/-/issues',
+    __SAU_IDEA_DIRECT_LINK__:
+      'https://forge.grandlyon.com/web-et-numerique/llle_project/ecolyo/-/issues',
     cozy: {},
   },
 }
diff --git a/src/assets/icons/ico/ecolyo.svg b/src/assets/icons/ico/ecolyo.svg
new file mode 100644
index 0000000000000000000000000000000000000000..edc5b46e670f918b0e793c70dfb64a89942b24be
--- /dev/null
+++ b/src/assets/icons/ico/ecolyo.svg
@@ -0,0 +1,27 @@
+<svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M86.9716 175.419C88.8818 176.194 91.1182 176.194 93.0284 175.419C171.638 143.533 168.442 98.8702 164.224 33.4965C163.953 29.2929 160.566 25.9821 156.385 25.5909C133.876 23.4852 113.472 16.3639 94.3788 5.187C91.6752 3.60433 88.3248 3.60433 85.6212 5.187C66.5282 16.3639 46.1235 23.4852 23.6155 25.5909C19.4338 25.9821 16.0469 29.2929 15.7757 33.4965C11.5585 98.8702 8.36248 143.533 86.9716 175.419Z" fill="url(#paint0_radial_14017_3979)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M157.256 33.1897C159.459 67.3186 160.876 93.0814 153.021 114.571C145.536 135.047 128.867 153.163 90.0001 169.047C51.1334 153.163 34.4642 135.047 26.9796 114.571C19.1243 93.0814 20.5412 67.3186 22.744 33.1897C47.1919 30.6969 69.3788 22.9376 90.0001 11.0387C110.621 22.9376 132.808 30.6969 157.256 33.1897ZM93.1788 179.392C91.1738 180.203 88.8264 180.203 86.8214 179.392C4.63003 146.152 7.64008 99.6449 12.04 31.663L12.0914 30.8684C12.3761 26.4693 15.931 23.0045 20.3203 22.5951C43.9456 20.3915 65.3632 12.9389 85.4039 1.24221C88.2417 -0.41407 91.7585 -0.41407 94.5963 1.24221C114.637 12.9389 136.055 20.3915 159.68 22.5951C164.069 23.0045 167.624 26.4693 167.909 30.8684L167.96 31.663C172.36 99.6449 175.37 146.152 93.1788 179.392Z" fill="#FFC600"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M157.256 33.1897C159.459 67.3186 160.876 93.0814 153.021 114.571C145.536 135.047 128.867 153.163 90.0001 169.047C51.1334 153.163 34.4642 135.047 26.9796 114.571C19.1243 93.0814 20.5412 67.3186 22.744 33.1897C47.1919 30.6969 69.3788 22.9376 90.0001 11.0387C110.621 22.9376 132.808 30.6969 157.256 33.1897ZM93.1788 179.392C91.1738 180.203 88.8264 180.203 86.8214 179.392C4.63003 146.152 7.64008 99.6449 12.04 31.663L12.0914 30.8684C12.3761 26.4693 15.931 23.0045 20.3203 22.5951C43.9456 20.3915 65.3632 12.9389 85.4039 1.24221C88.2417 -0.41407 91.7585 -0.41407 94.5963 1.24221C114.637 12.9389 136.055 20.3915 159.68 22.5951C164.069 23.0045 167.624 26.4693 167.909 30.8684L167.96 31.663C172.36 99.6449 175.37 146.152 93.1788 179.392Z" fill="url(#paint1_linear_14017_3979)" fill-opacity="0.75"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M90.002 180C91.0892 180 92.1763 179.797 93.178 179.392C175.369 146.152 172.359 99.6449 167.959 31.6631L167.908 30.8684C167.623 26.4693 164.068 23.0045 159.679 22.5951C136.054 20.3915 114.636 12.9389 94.5955 1.24221C93.1774 0.414524 91.5897 0.000453903 90.002 0V11.0402C110.623 22.9382 132.809 30.697 157.255 33.1897C159.458 67.3186 160.875 93.0814 153.02 114.571C145.535 135.047 128.867 153.163 90.002 169.046V180Z" fill="#DB8300"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M90.002 180C91.0892 180 92.1763 179.797 93.178 179.392C175.369 146.152 172.359 99.6449 167.959 31.6631L167.908 30.8684C167.623 26.4693 164.068 23.0045 159.679 22.5951C136.054 20.3915 114.636 12.9389 94.5955 1.24221C93.1774 0.414524 91.5897 0.000453903 90.002 0V11.0402C110.623 22.9382 132.809 30.697 157.255 33.1897C159.458 67.3186 160.875 93.0814 153.02 114.571C145.535 135.047 128.867 153.163 90.002 169.046V180Z" fill="url(#paint2_linear_14017_3979)" fill-opacity="0.75"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56 57.5462C56 53.3785 59.3786 50 63.5462 50C67.7139 50 71.0924 53.3785 71.0924 57.5462V110.416C71.0924 111.581 70.148 112.526 68.983 112.526H58.1094C56.9444 112.526 56 111.581 56 110.416V57.5462ZM82.9505 84.5012C82.9505 80.3336 86.329 76.955 90.4967 76.955C94.6643 76.955 98.0429 80.3336 98.0429 84.5012V110.421C98.0429 111.586 97.0985 112.53 95.9335 112.53H85.0599C83.8949 112.53 82.9505 111.586 82.9505 110.421V84.5012ZM117.452 66.1721C113.285 66.1721 109.906 69.5507 109.906 73.7183V110.418C109.906 111.583 110.85 112.527 112.015 112.527H122.889C124.054 112.527 124.998 111.583 124.998 110.418V73.7183C124.998 69.5507 121.62 66.1721 117.452 66.1721Z" fill="#FFC600"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56 57.5462C56 53.3785 59.3786 50 63.5462 50C67.7139 50 71.0924 53.3785 71.0924 57.5462V110.416C71.0924 111.581 70.148 112.526 68.983 112.526H58.1094C56.9444 112.526 56 111.581 56 110.416V57.5462ZM82.9505 84.5012C82.9505 80.3336 86.329 76.955 90.4967 76.955C94.6643 76.955 98.0429 80.3336 98.0429 84.5012V110.421C98.0429 111.586 97.0985 112.53 95.9335 112.53H85.0599C83.8949 112.53 82.9505 111.586 82.9505 110.421V84.5012ZM117.452 66.1721C113.285 66.1721 109.906 69.5507 109.906 73.7183V110.418C109.906 111.583 110.85 112.527 112.015 112.527H122.889C124.054 112.527 124.998 111.583 124.998 110.418V73.7183C124.998 69.5507 121.62 66.1721 117.452 66.1721Z" fill="url(#paint3_linear_14017_3979)"/>
+<defs>
+<radialGradient id="paint0_radial_14017_3979" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(51.4865 24.6859) rotate(72.6265) scale(128.981 134.594)">
+<stop stop-color="#2B2D37"/>
+<stop offset="1" stop-color="#15161B"/>
+</radialGradient>
+<linearGradient id="paint1_linear_14017_3979" x1="86.7661" y1="174.186" x2="29.0927" y2="21.109" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CB6E00"/>
+<stop offset="1" stop-color="#FFC600" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_14017_3979" x1="139.589" y1="174.725" x2="89.9987" y2="9.79094" gradientUnits="userSpaceOnUse">
+<stop stop-color="#793A00"/>
+<stop offset="1" stop-color="#DB8300" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_14017_3979" x1="124.998" y1="110.374" x2="59.2341" y2="50.0002" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DB8300"/>
+<stop offset="1" stop-color="#FFC600"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/challenge/ecolyo.svg b/src/assets/icons/visu/challenge/ecolyo.svg
deleted file mode 100644
index 504f722c6051fd1557b500fc889cec674f6c5af4..0000000000000000000000000000000000000000
--- a/src/assets/icons/visu/challenge/ecolyo.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M30.9999 58.3539C57.4593 48.0072 55.4028 33.2974 54.0319 11.3573C45.532 10.9834 37.9918 8.36552 30.9999 4.00244C24.0081 8.36552 16.4679 10.9834 7.96801 11.3573C6.59706 33.2974 4.54064 48.0072 30.9999 58.3539Z" fill="#1B1C22"/>
-<path d="M31 0L29.2075 1.11858C22.6524 5.20911 15.6717 7.61771 7.81931 7.96319L4.77457 8.09716L4.58414 11.1446C4.52759 12.0496 4.46881 12.95 4.41037 13.8451C3.78152 23.4778 3.1917 32.5124 5.83816 40.2978C8.88926 49.2736 15.9673 56.1216 29.7672 61.5179L31 62V58.3535C5.57809 48.4124 6.4797 34.4437 7.80541 13.9043C7.85951 13.0662 7.91431 12.2171 7.96806 11.3569C16.4679 10.9829 24.0082 8.36507 31 4.00199V0Z" fill="#FFC600"/>
-<path d="M31 0L32.7925 1.11858C39.3476 5.20911 46.3283 7.61771 54.1807 7.96319L57.2254 8.09716L57.4159 11.1446C57.4724 12.0496 57.5312 12.95 57.5896 13.8451C58.2185 23.4778 58.8083 32.5124 56.1618 40.2978C53.1107 49.2736 46.0327 56.1216 32.2328 61.5179L31 62V58.3535C56.4219 48.4124 55.5203 34.4437 54.1946 13.9043C54.1405 13.0662 54.0857 12.2171 54.0319 11.3569C45.5321 10.9829 37.9918 8.36507 31 4.00199V0Z" fill="#DB8300"/>
-<path d="M22.639 21.3672H23.8419C24.3222 21.3672 24.783 21.5561 25.1226 21.8925C25.4623 22.2289 25.6532 22.6851 25.6532 23.1608V41.3684H20.8277V23.1608C20.8277 22.6851 21.0185 22.2289 21.3582 21.8925C21.6979 21.5561 22.1586 21.3672 22.639 21.3672ZM30.9965 30.2331H32.1993C32.6797 30.2331 33.1404 30.4221 33.4801 30.7585C33.8198 31.0948 34.0107 31.5511 34.0107 32.0268V41.3684H29.1852V32.0268C29.1852 31.5511 29.376 31.0948 29.7157 30.7585C30.0554 30.4221 30.5161 30.2331 30.9965 30.2331ZM39.8521 26.8035H41.055C41.5353 26.8035 41.9961 26.9925 42.3358 27.3288C42.6754 27.6652 42.8663 28.1214 42.8663 28.5971V41.3684H38.0408V28.5971C38.0408 28.1214 38.2316 27.6652 38.5713 27.3288C38.911 26.9925 39.3717 26.8035 39.8521 26.8035Z" fill="#FFC600"/>
-</svg>
diff --git a/src/components/Challenge/ChallengeCardLast.spec.tsx b/src/components/Challenge/ChallengeCardLast.spec.tsx
index 68b0c68149f6f47706cecf0809fba50836e6f954..0a304978c8e1a5527c6aef4cea4956e1ccba3043 100644
--- a/src/components/Challenge/ChallengeCardLast.spec.tsx
+++ b/src/components/Challenge/ChallengeCardLast.spec.tsx
@@ -5,6 +5,9 @@ import { Provider } from 'react-redux'
 import configureStore from 'redux-mock-store'
 import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
 
+// Value coming from jest.config
+declare let __SAU_IDEA_DIRECT_LINK__: string
+
 jest.mock('cozy-ui/transpiled/react/I18n', () => {
   return {
     useI18n: jest.fn(() => {
@@ -18,12 +21,13 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
 const mockStore = configureStore([])
 
 describe('ChallengeCardLast component', () => {
+  const store = mockStore({
+    ecolyo: {
+      global: globalStateData,
+    },
+  })
+
   it('should be rendered correctly', () => {
-    const store = mockStore({
-      ecolyo: {
-        global: globalStateData,
-      },
-    })
     const wrapper = mount(
       <Provider store={store}>
         <ChallengeCardLast />
@@ -31,4 +35,19 @@ describe('ChallengeCardLast component', () => {
     )
     expect(wrapper).toMatchSnapshot()
   })
+
+  it('should open SAU new idea link', () => {
+    global.open = jest.fn()
+
+    const wrapper = mount(
+      <Provider store={store}>
+        <ChallengeCardLast />
+      </Provider>
+    )
+    wrapper.find('.btn_lastCard').first().simulate('click')
+    expect(window.open).toBeCalledTimes(1)
+    expect(global.open).toHaveBeenCalledWith(
+      `${__SAU_IDEA_DIRECT_LINK__}?version=0.0.0`
+    )
+  })
 })
diff --git a/src/components/Challenge/ChallengeCardLast.tsx b/src/components/Challenge/ChallengeCardLast.tsx
index 2de19074e3d25fba697cd9632faa2d418ceb1976..252ad7ec0eb7aa76703eab79af70e9b1d6287923 100644
--- a/src/components/Challenge/ChallengeCardLast.tsx
+++ b/src/components/Challenge/ChallengeCardLast.tsx
@@ -1,18 +1,21 @@
+import { Button } from '@material-ui/core'
+import ecolyoIcon from 'assets/icons/ico/ecolyo.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useClient } from 'cozy-client'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import React from 'react'
 import './challengeCardLast.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import ecolyoIcon from 'assets/icons/visu/challenge/ecolyo.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { Button } from '@material-ui/core'
-import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
-import { useDispatch } from 'react-redux'
+
+declare let __SAU_IDEA_DIRECT_LINK__: string
 
 const ChallengeCardLast: React.FC = () => {
   const { t } = useI18n()
-  const dispatch = useDispatch()
+  const client = useClient()
 
   const handleClickFeedbacks = (): void => {
-    dispatch(updateModalIsFeedbacksOpen(true))
+    window.open(
+      `${__SAU_IDEA_DIRECT_LINK__}?version=${client.appMetadata.version}`
+    )
   }
 
   return (
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index 62c7251fe07609d54efaad5ba93d4cb175bc2c3f..4875200e3e8dde4ff5b23bb5a359017cb8c41d57 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -188,7 +188,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
           className="cv-button"
           icon="test-file-stub"
           onClick={[Function]}
-          sized={40}
+          sized={22}
         >
           <WithStyles(WithStyles(ForwardRef(IconButton)))
             aria-label="header.accessibility.button_open_feedbacks"
@@ -270,27 +270,27 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
                       >
                         <StyledIcon
                           icon="test-file-stub"
-                          size={40}
+                          size={22}
                         >
                           <Icon
                             aria-hidden={true}
                             icon="test-file-stub"
-                            size={40}
+                            size={22}
                             spin={false}
                           >
                             <Component
                               aria-hidden={true}
                               className="styles__icon___23x3R"
-                              height={40}
+                              height={22}
                               style={Object {}}
-                              width={40}
+                              width={22}
                             >
                               <svg
                                 aria-hidden={true}
                                 className="styles__icon___23x3R"
-                                height={40}
+                                height={22}
                                 style={Object {}}
-                                width={40}
+                                width={22}
                               >
                                 <use
                                   xlinkHref="#test-file-stub"
diff --git a/src/components/FAQ/FAQContent.spec.tsx b/src/components/FAQ/FAQContent.spec.tsx
deleted file mode 100644
index 56c711d0d23b12f9339b243f4639e0137010eb3f..0000000000000000000000000000000000000000
--- a/src/components/FAQ/FAQContent.spec.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
-import FAQContent from 'components/FAQ/FAQContent'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-import { faqData } from '../../../tests/__mocks__/faq.mock'
-import mockClient from '../../../tests/__mocks__/client'
-import { act } from 'react-dom/test-utils'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
-  return {
-    useI18n: jest.fn(() => {
-      return {
-        t: (str: string) => str,
-      }
-    }),
-  }
-})
-
-jest.mock('cozy-client', () => ({
-  ...jest.requireActual('cozy-client'),
-  useClient: () => mockClient,
-}))
-
-const mockFAQData = jest.fn()
-jest.mock('components/FAQ/FAQData', () => {
-  return () => mockFAQData()
-})
-
-describe('FAQContent', () => {
-  beforeEach(() => {
-    mockFAQData.mockClear()
-  })
-
-  it('should render a loader', () => {
-    mockFAQData.mockResolvedValue([])
-    const wrapper = mount(<FAQContent />)
-    expect(wrapper.find(StyledSpinner).exists()).toBeTruthy()
-  })
-
-  it('should render the full FAQ', async () => {
-    mockFAQData.mockResolvedValue(faqData)
-    const wrapper = mount(<FAQContent />)
-    await act(async () => {
-      await new Promise(resolve => setTimeout(resolve, 0))
-      wrapper.update()
-    })
-    expect(toJson(wrapper)).toMatchSnapshot()
-  })
-})
diff --git a/src/components/FAQ/FAQContent.tsx b/src/components/FAQ/FAQContent.tsx
deleted file mode 100644
index e510abed50c1cae5f10496562cc7e5907348ccd5..0000000000000000000000000000000000000000
--- a/src/components/FAQ/FAQContent.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import './faqContent.scss'
-import { useClient } from 'cozy-client'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import FaqData from 'components/FAQ/FAQData'
-import {
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-} from '@material-ui/core'
-import ChevronOffIcon from 'assets/icons/ico/chevron-off.svg'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import { FAQSection } from 'models'
-import { FluidType } from 'enum/fluid.enum'
-import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
-
-const FAQContent: React.FC = () => {
-  const { t } = useI18n()
-  const client = useClient()
-  const [expanded, setExpanded] = useState<string | false>(false)
-  const [faqData, setFaqData] = useState<FAQSection[]>([])
-
-  const handleChange =
-    (panel: string) => (event: React.ChangeEvent<{}>, isExpanded: boolean) => {
-      event.preventDefault()
-      setExpanded(isExpanded ? panel : false)
-    }
-
-  useEffect(() => {
-    let subscribed = true
-    async function loadFaqData() {
-      const data: FAQSection[] = await FaqData(client)
-      if (subscribed && data.length > 0) {
-        setFaqData(data)
-      }
-    }
-    loadFaqData()
-    return () => {
-      subscribed = false
-    }
-  }, [client])
-
-  if (faqData.length <= 0) {
-    return (
-      <div className="faq-spinner">
-        <StyledSpinner size="5rem" fluidType={FluidType.MULTIFLUID} />
-      </div>
-    )
-  }
-
-  return (
-    <div className="faq-view-root">
-      <div className="faq-view-content">
-        {faqData.map((faq, index) => {
-          return (
-            <div key={index} className="faq-section">
-              <div className="text-16-normal-uppercase">{faq.section}</div>
-              {faq.questions.map((question, index2) => {
-                return (
-                  <Accordion
-                    key={index2}
-                    expanded={expanded === `panel${index}_${index2}`}
-                    onChange={handleChange(`panel${index}_${index2}`)}
-                    classes={{
-                      root: 'expansion-panel-root',
-                    }}
-                  >
-                    <AccordionSummary
-                      aria-label={t('faq.accessibility.button_toggle_detail')}
-                      expandIcon={<StyledIcon icon={ChevronOffIcon} />}
-                      classes={{
-                        root: 'expansion-panel-summary small bold-text',
-                        content: 'expansion-panel-content',
-                      }}
-                    >
-                      {question.summary}
-                    </AccordionSummary>
-                    <AccordionDetails
-                      classes={{
-                        root: 'expansion-panel-details',
-                      }}
-                    >
-                      {question.details}
-                    </AccordionDetails>
-                  </Accordion>
-                )
-              })}
-            </div>
-          )
-        })}
-      </div>
-    </div>
-  )
-}
-
-export default FAQContent
diff --git a/src/components/FAQ/FAQData.spec.tsx b/src/components/FAQ/FAQData.spec.tsx
deleted file mode 100644
index dcdd2188d461c5570effe7b0b9da677608b74cc0..0000000000000000000000000000000000000000
--- a/src/components/FAQ/FAQData.spec.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import mockClient from '../../../tests/__mocks__/client'
-import FaqData from 'components/FAQ/FAQData'
-import { allLastFluidPrices } from '../../../tests/__mocks__/fluidPrice.mock'
-import { FAQSection } from 'models'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
-  return {
-    useI18n: jest.fn(() => {
-      return {
-        t: (str: string) => str,
-      }
-    }),
-  }
-})
-
-const mockGetAllLastPrices = jest.fn()
-jest.mock('services/fluidsPrices.service', () => {
-  return jest.fn(() => {
-    return {
-      getAllLastPrices: mockGetAllLastPrices,
-    }
-  })
-})
-
-describe('FAQData', () => {
-  beforeEach(() => {
-    mockGetAllLastPrices.mockClear()
-  })
-
-  it('should return', async () => {
-    mockGetAllLastPrices.mockResolvedValue(allLastFluidPrices)
-    const result: FAQSection[] = await FaqData(mockClient)
-    expect(result.length).toBe(3)
-  })
-})
diff --git a/src/components/FAQ/FAQData.tsx b/src/components/FAQ/FAQData.tsx
deleted file mode 100644
index 53a91fb12e8a7c1369766e349de156de988aecc3..0000000000000000000000000000000000000000
--- a/src/components/FAQ/FAQData.tsx
+++ /dev/null
@@ -1,369 +0,0 @@
-/* eslint-disable react/no-unescaped-entities */
-import React from 'react'
-import { Client } from 'cozy-client'
-import { FluidType } from 'enum/fluid.enum'
-import { DateTime } from 'luxon'
-import { FAQSection, FluidPrice } from 'models'
-import FluidPricesService from 'services/fluidsPrices.service'
-
-const FaqData = async (client: Client): Promise<FAQSection[]> => {
-  const fluidsPricesService = new FluidPricesService(client)
-  const fluidPrices: FluidPrice[] = await fluidsPricesService.getAllLastPrices()
-  return [
-    {
-      section: 'Mes données',
-      questions: [
-        {
-          summary: 'Comment accéder à mes données électricité ?',
-          details: (
-            <div>
-              Rendez-vous dans la partie Options du service et cliquer sur le
-              bouton "Se connecter à l'électricité". Suivez la procédure (en
-              vous créant un compte Enedis si nécessaire). Une fois votre
-              consentement donné, vos données de consommation seront récupérées.
-            </div>
-          ),
-        },
-        {
-          summary: 'Comment accéder à mes données gaz ?',
-          details: (
-            <div>
-              Rendez-vous dans la partie Options du service et cliquez sur le
-              bouton "Se connecter au gaz". Suivez la procédure (en vous créant
-              un compte GRDF si nécessaire). Une fois votre consentement donné,
-              vos données de consommation seront récupérées.
-            </div>
-          ),
-        },
-        {
-          summary: 'Comment accéder à mes données eau ?',
-          details: (
-            <div>
-              Rendez-vous dans la partie Options du service et cliquez sur "Se
-              connecter à l'eau". Entrez vos identifiants Eau du Grand Lyon. Vos
-              données seront ainsi récupérées.
-            </div>
-          ),
-        },
-        {
-          summary: "Mes données ne s'affichent pas. Que se passe-t-il ?",
-          details: (
-            <div>
-              <p>
-                En fonctionnement normal, vos données électricité arrivent à J+1
-                (le lendemain), vos données eau et gaz arrivent quant à elles 3
-                jours après (à J+3).
-              </p>
-              <p>Plusieurs raisons peuvent expliquer l'absence de données :</p>
-              <p>
-                - Le lien entre Ecolyo et le fournisseur de données est rompu.
-                Une mise à jour de ce lien (en bas de la page) peut parfois
-                résoudre ce problème.
-              </p>
-              <p>
-                - Si la mise à jour a été effectuée mais que la donnée
-                n'apparaît toujours pas, le souci vient du fournisseur de
-                données (Enedis pour l'électricité, GRDF pour le gaz, Eau du
-                Grand Lyon pour l'eau). Cela peut être un problème de
-                transmission de données entre le compte et le système de données
-                du partenaire, ou un problème sur votre compteur. Dans ce cas,
-                le mieux est de contacter directement Enedis, GRDF ou Eau du
-                Grand Lyon pour tenter de régler le problème avec eux.
-              </p>
-            </div>
-          ),
-        },
-        {
-          summary:
-            'Pourquoi dois-je avoir un compte Enedis, GRDF ou Eau du Grand Lyon ?',
-          details: (
-            <div>
-              Nous avons fait le choix de passer par les gestionnaires de
-              réseaux (Enedis pour l'électricité, GRDF pour le gaz et Eau du
-              Grand Lyon pour l'eau). Ils sont en effet responsables de votre
-              compteur, de la collecte des données et du partage de celles-ci.
-              Ils ont les données brutes, ces mêmes données qui sont consolidées
-              pour votre fournisseur d'énergie ou d'eau, celui-là même qui vous
-              facture. Pour récupérer vos données, et afin que vous et vous seul
-              y ait accès, il vous faut créer un compte chez ces gestionnaires
-              de réseaux. Ce process n'est à réaliser que lors de première
-              connexion.
-            </div>
-          ),
-        },
-        {
-          summary:
-            "Si je n'en ai pas, est-ce possible d'avoir des compteurs communicants (Linky, Gazpar, Téléo ?)",
-          details: (
-            <div>
-              <p>
-                - Linky, le compteur électricité est déployé sur 95% de notre
-                territoire métropolitain. Si vous n'êtes pas encore équipé, vous
-                pouvez contacter Enedis au 0 970 831 970 (prix d'un appel local)
-                entre 8h et 17h pour convenir d'un rendez-vous.
-              </p>
-              <p>
-                - Concernant Gazpar le compteur gaz, s'il n'est pas encore
-                installé chez vous, vous pouvez vous renseigner sur le planning
-                de déploiement du compteur à cette adresse :{' '}
-                <a href="https://monespace.grdf.fr/compteur-gazpar-et-ma-commune">
-                  https://monespace.grdf.fr/compteur-gazpar-et-ma-commune.
-                </a>
-              </p>
-              <p>
-                - Concernant Téléo, le compteur eau, si vous êtes en eau
-                individualisé. En principe, vous devriez déjà avoir Téléo chez
-                vous. Si vous êtes abonné et que vous n'êtes pas encore équipé,
-                contactez le service client d'eau du Grand Lyon par téléphone au
-                09 69 39 69 99 (numéro cristal non surtaxé) pour obtenir
-                l'installation d'un compteur communicant Téléo.
-              </p>
-            </div>
-          ),
-        },
-        {
-          summary: 'Qui a accès à mes données de consommation?',
-          details: (
-            <div>
-              <p>
-                Vos données privées de consommation d’énergie et d’eau sont
-                récupérées, sauvegardées et stockées dans votre cloud personnel
-                à votre initiative sans visibilité de la Métropole de Lyon sur
-                leur contenu. Il en est de même pour les données privées de
-                composition du logement et du foyer, fournies par vos soins.
-                Elles restent également sans visibilité de la Métropole de Lyon
-                sur leur contenu.
-              </p>
-              <p>
-                Dans le cadre de l’évaluation et de l’amélioration du service,
-                des données d’utilisation anonymisées sont cependant remontées à
-                des fins d’exploitation statistiques. La récupération de ces
-                statistiques anonymisées nous permettra de s’assurer du bon
-                fonctionnement technique de la connexion à vos données de
-                consommation ainsi que d’évaluer l’impact global en termes de
-                baisse des consommations énergétiques de notre service (Plus
-                d’informations sur la manière dont votre anonymat est bien
-                préservé dans ce processus{' '}
-                <a href=" https://ecolyo.com/cloud_statistiques.html">ici</a>
-                ).
-              </p>
-            </div>
-          ),
-        },
-        {
-          summary:
-            'Comment supprimer mon consentement au partage de mes données (électricité ou gaz) ?',
-          details: (
-            <div>
-              <p>
-                Dans un premier temps, vous pouvez supprimer le connecteur
-                électricité, gaz ou eau dans la page Options du service afin de
-                stopper le transfert de vos données vers notre service. Pour
-                supprimer totalement votre consentement vous devez ensuite :
-              </p>
-              <p>
-                - pour l'électricité : contacter directement
-                dataconnect@enedis.fr pour leur indiquer votre souhait de
-                supprimer le consentement de partage des données avec notre
-                service.
-              </p>
-              <p>
-                - pour le gaz, rendez-vous dans votre espace GRDF (
-                <a href="https://monespace.grdf.fr/">
-                  https://monespace.grdf.fr/
-                </a>
-                ) dans partie "Suivi des consommations" puis "Données
-                consultées". Vous pouvez alors supprimer le consentement donné à
-                notre service.
-              </p>
-            </div>
-          ),
-        },
-      ],
-    },
-    {
-      section: 'Contenu du service',
-      questions: [
-        {
-          summary:
-            'Pourquoi les prix affichés sont-ils différents de ceux indiqués sur ma facture ?',
-          details: (
-            <div>
-              <p>
-                Le prix de votre électricité ou de votre gaz dépend de l'offre
-                choisie auprès de votre fournisseur. N’ayant pas accès à cette
-                information, Ecolyo affiche un prix moyen par fluide.
-              </p>
-              <p>Tarifs moyens retenus :</p>
-              <p>
-                - pour l'électricité, 1 kWh ={' '}
-                {fluidPrices[FluidType.ELECTRICITY].price}€ TTC (il correspond
-                au tarif réglementé d’EDF au{' '}
-                {DateTime.fromISO(fluidPrices[FluidType.ELECTRICITY].startDate)
-                  .setZone('utc', {
-                    keepLocalTime: true,
-                  })
-                  .toLocaleString()}{' '}
-                pour une puissance souscrite de 3 ou 6 kVA et hors offre heure
-                pleine/heure creuse)
-              </p>
-              <p>
-                - pour le gaz, 1 kWh = {fluidPrices[FluidType.GAS].price}€ TTC
-                (tarif réglementé de vente au{' '}
-                {DateTime.fromISO(fluidPrices[FluidType.GAS].startDate)
-                  .setZone('utc', {
-                    keepLocalTime: true,
-                  })
-                  .toLocaleString()}{' '}
-                pour un consommateur soutirant moins de 6 MWh par an)
-              </p>
-              <p>
-                - pour l'eau, 1 litre d’eau ={' '}
-                {fluidPrices[FluidType.WATER].price}€ TTC (prix constaté au{' '}
-                {DateTime.fromISO(fluidPrices[FluidType.WATER].startDate)
-                  .setZone('utc', {
-                    keepLocalTime: true,
-                  })
-                  .toLocaleString()}{' '}
-                pour un abonnement et une consommation de 120 m3/an sur la
-                Métropole de Lyon)
-              </p>
-              <p>
-                Le coût de votre abonnement n'est pas pris en compte dans
-                Ecolyo.
-              </p>
-            </div>
-          ),
-        },
-        {
-          summary:
-            'Est-ce la météo est prise en compte dans les données affichées ?',
-          details: (
-            <div>
-              La météo n'est pour l'instant pas prise en compte dans les données
-              présentées. Nous réfléchissons à termes à une intégration des
-              données de température extérieure. En effet, celles-ci influent
-              fortement sur les comportements et donc les consommations aussi
-              bien d'énergie en hiver que d'eau en été. Affaire à suivre pour
-              notre service !
-            </div>
-          ),
-        },
-        {
-          summary: 'Quelle est la source des astuces ?',
-          details: (
-            <div>
-              Les astuces présentées dans le service sont issues de guides
-              préparés par le CLER - Réseau pour la transition énergétique ainsi
-              que par l'ADEME (l'Agence de l'environnement et de la maîtrise de
-              l'énergie). La source principale est le guide des 100 écogestes
-              (version 2020-2021) produit par le CLER dans le cadre du programme
-              DECLIC.
-            </div>
-          ),
-        },
-        {
-          summary: "Qu'est-ce qu'un kWh ?",
-          details: (
-            <div>
-              Le kWh est l'unité de mesure correspondant à l'énergie consommée
-              pendant une heure par un appareil d'une puissance de 1000 watts (1
-              kW). Avec 1 kWh, il est possible de … regarder la télévision
-              pendant 3 à 5h (selon le modèle de télé), cuire un poulet au four
-              thermostat 6 pendant 1h, vous servir d'un ordinateur au bureau
-              pendant une demi-journée...
-            </div>
-          ),
-        },
-        {
-          summary:
-            'Pourquoi dois-je renseigner mon profil dans le service ? Comment le modifier ? ',
-          details: (
-            <div>
-              Renseigner votre profil c'est profiter à la fois d'une comparaison
-              de vos consommations avec les consommation d'un foyer vous
-              ressemblant (allez jetez un œil dans la partie Analyse) mais aussi
-              avoir accès à un tri personnalisé des astuces dans la partie
-              Astuces du service.
-            </div>
-          ),
-        },
-        {
-          summary: 'Comment sont choisis les astuces personnalisées ?',
-          details: (
-            <div>
-              Les astuces personnalisées sont aujourd'hui choisies en fonction
-              des compteurs individuels que vous possédez (communicants ou non).
-              Elles vous permettent d'agir sur ces consommations. D'autres modes
-              de tri, davantage personnalisables seront proposés à l'avenir.
-            </div>
-          ),
-        },
-      ],
-    },
-    {
-      section: 'Autres infos',
-      questions: [
-        {
-          summary: "Comment accéder plus facilement au service à l'avenir ?",
-          details: (
-            <div>
-              <p>
-                Pour retrouver facilement l'accès à Ecolyo à l'avenir, il suffit
-                de vous créer un raccourci :
-              </p>
-              <p>
-                - Sur mobile APPLE : Pour créer un raccourci sur votre écran
-                d'accueil, ouvrez Ecolyo dans Safari et cliquez sur Partager
-                (carré avec une flèche pointant vers le haut), en descendant
-                dans le menu cliquez sur "Sur l'écran d'accueil" puis ajouter.
-                Un raccourci d'Ecolyo sera alors présent (il ressemblera à une
-                application comme une autre).
-              </p>
-              <p>
-                - Sur mobile ANDROID : Une fois sur la page web du service,
-                appuyez sur les trois petits points du menu en haut à droite.
-                Sélectionnez "Ajouter à l'écran d'accueil". Nommez la page et
-                appuyez sur "Ajouter". Un raccourci vers la page web est apparu
-                sur l'écran d'accueil de votre smartphone.
-              </p>
-              <p>
-                - Sur ordinateur : ajoutez classiquement Ecolyo dans les Favoris
-                de votre navigateur préféré. Cela sera plus facile par la suite
-                de retrouver notre service.
-              </p>
-              <p>
-                Si un jour vous avez totalement perdu l'adresse d'accès à votre
-                service, vous pouvez le retrouver en cliquant tout en bas sur le
-                bouton "Accéder à mon cloud personnel" du site web Ecolyo.com
-              </p>
-            </div>
-          ),
-        },
-        {
-          summary:
-            "Pour accéder à Ecolyo, j'ai dû me créer un cloud personnel Grand Lyon. Qu'est-ce ?",
-          details: (
-            <div>
-              Souvent le cloud personnel est réduit à un simple espace de
-              stockage de documents mais il est bien plus que ça. C'est un
-              espace individuel et sécurisé. Vous seul pouvez y accéder,
-              personne d'autre. Dans le cloud vous avez deux types de services:
-              les premiers sont des services qui vous permettent de récupérer
-              vos données et les stocker dans cet espace. Vous avez aussi des
-              services qui vous permettent de valoriser vos données pour
-              qu'elles aient plus de sens pour vous (c'est le cas d'Ecolyo!). Si
-              vous souhaitez en savoir plus sur votre cloud personnel cliquez{' '}
-              <a href="https://support.grandlyon.com/clouds-personnels-grand-lyon/">
-                ici
-              </a>
-              .
-            </div>
-          ),
-        },
-      ],
-    },
-  ]
-}
-
-export default FaqData
diff --git a/src/components/FAQ/FAQLink.tsx b/src/components/FAQ/FAQLink.tsx
deleted file mode 100644
index dbb62aa0a7a07b4ae24ca0b991d97dd9ba26e47e..0000000000000000000000000000000000000000
--- a/src/components/FAQ/FAQLink.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { useCallback } from 'react'
-import './faqLink.scss'
-import Link from '@material-ui/core/Link'
-import { Link as RouterLink } from 'react-router-dom'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import QuestionMarkIcon from 'assets/icons/ico/questionMark.svg'
-import { useClient } from 'cozy-client'
-import { UsageEventType } from 'enum/usageEvent.enum'
-import UsageEventService from 'services/usageEvent.service'
-
-const FAQLink: React.FC = () => {
-  const { t } = useI18n()
-  const client = useClient()
-  const emitNavEvent = useCallback(async () => {
-    await UsageEventService.addEvent(client, {
-      type: UsageEventType.NAVIGATION_EVENT,
-      target: 'faq',
-    })
-  }, [client])
-  return (
-    <div className="faq-root">
-      <div className="faq-content">
-        <div className="faq-header text-16-normal-uppercase">
-          {t('faq.title_faq')}
-        </div>
-        <Link className="faq-card-link" component={RouterLink} to="options/FAQ">
-          <div className="card" onClick={emitNavEvent}>
-            <div className="faq-card">
-              <div className="faq-card-content">
-                <StyledIcon
-                  className="faq-card-content-icon"
-                  icon={QuestionMarkIcon}
-                  size={42}
-                />
-                <div className="faq-card-content-title">
-                  {t('faq.read_faq')}
-                </div>
-              </div>
-            </div>
-          </div>
-        </Link>
-      </div>
-    </div>
-  )
-}
-
-export default FAQLink
diff --git a/src/components/FAQ/FAQView.spec.tsx b/src/components/FAQ/FAQView.spec.tsx
deleted file mode 100644
index 74f74ef60abcb520e3ff5571e0c85389b725583b..0000000000000000000000000000000000000000
--- a/src/components/FAQ/FAQView.spec.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import FAQView from 'components/FAQ/FAQView'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
-  return {
-    useI18n: jest.fn(() => {
-      return {
-        t: (str: string) => str,
-      }
-    }),
-  }
-})
-jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
-jest.mock('components/Header/Header', () => 'mock-header')
-jest.mock('components/Content/Content', () => 'mock-content')
-
-describe('FAQView component', () => {
-  it('should render only the parent component', () => {
-    const component = shallow(<FAQView />).getElement()
-    expect(component).toMatchSnapshot()
-  })
-})
diff --git a/src/components/FAQ/FAQView.tsx b/src/components/FAQ/FAQView.tsx
deleted file mode 100644
index 69240dfb19882f4592d62d34359b1050a9150cee..0000000000000000000000000000000000000000
--- a/src/components/FAQ/FAQView.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { useState } from 'react'
-import CozyBar from 'components/Header/CozyBar'
-import Header from 'components/Header/Header'
-import Content from 'components/Content/Content'
-import FAQContent from 'components/FAQ/FAQContent'
-
-const FAQView: React.FC = () => {
-  const [headerHeight, setHeaderHeight] = useState<number>(0)
-  const defineHeaderHeight = (height: number) => {
-    setHeaderHeight(height)
-  }
-  return (
-    <React.Fragment>
-      <CozyBar titleKey={'common.title_faq'} displayBackArrow={true} />
-      <Header
-        setHeaderHeight={defineHeaderHeight}
-        desktopTitleKey={'common.title_faq'}
-        displayBackArrow={true}
-      ></Header>
-      <Content height={headerHeight}>
-        <FAQContent />
-      </Content>
-    </React.Fragment>
-  )
-}
-
-export default FAQView
diff --git a/src/components/FAQ/__snapshots__/FAQContent.spec.tsx.snap b/src/components/FAQ/__snapshots__/FAQContent.spec.tsx.snap
deleted file mode 100644
index 2a395d05dd96bb4ad578c010d150c736f31edc47..0000000000000000000000000000000000000000
--- a/src/components/FAQ/__snapshots__/FAQContent.spec.tsx.snap
+++ /dev/null
@@ -1,1194 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FAQContent should render the full FAQ 1`] = `
-<FAQContent>
-  <div
-    className="faq-view-root"
-  >
-    <div
-      className="faq-view-content"
-    >
-      <div
-        className="faq-section"
-        key="0"
-      >
-        <div
-          className="text-16-normal-uppercase"
-        >
-          Mes données
-        </div>
-        <WithStyles(ForwardRef(Accordion))
-          classes={
-            Object {
-              "root": "expansion-panel-root",
-            }
-          }
-          expanded={false}
-          key="0"
-          onChange={[Function]}
-        >
-          <ForwardRef(Accordion)
-            classes={
-              Object {
-                "disabled": "Mui-disabled",
-                "expanded": "Mui-expanded",
-                "root": "MuiAccordion-root expansion-panel-root",
-                "rounded": "MuiAccordion-rounded",
-              }
-            }
-            expanded={false}
-            onChange={[Function]}
-          >
-            <WithStyles(ForwardRef(Paper))
-              className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
-              square={false}
-            >
-              <ForwardRef(Paper)
-                className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
-                classes={
-                  Object {
-                    "elevation0": "MuiPaper-elevation0",
-                    "elevation1": "MuiPaper-elevation1",
-                    "elevation10": "MuiPaper-elevation10",
-                    "elevation11": "MuiPaper-elevation11",
-                    "elevation12": "MuiPaper-elevation12",
-                    "elevation13": "MuiPaper-elevation13",
-                    "elevation14": "MuiPaper-elevation14",
-                    "elevation15": "MuiPaper-elevation15",
-                    "elevation16": "MuiPaper-elevation16",
-                    "elevation17": "MuiPaper-elevation17",
-                    "elevation18": "MuiPaper-elevation18",
-                    "elevation19": "MuiPaper-elevation19",
-                    "elevation2": "MuiPaper-elevation2",
-                    "elevation20": "MuiPaper-elevation20",
-                    "elevation21": "MuiPaper-elevation21",
-                    "elevation22": "MuiPaper-elevation22",
-                    "elevation23": "MuiPaper-elevation23",
-                    "elevation24": "MuiPaper-elevation24",
-                    "elevation3": "MuiPaper-elevation3",
-                    "elevation4": "MuiPaper-elevation4",
-                    "elevation5": "MuiPaper-elevation5",
-                    "elevation6": "MuiPaper-elevation6",
-                    "elevation7": "MuiPaper-elevation7",
-                    "elevation8": "MuiPaper-elevation8",
-                    "elevation9": "MuiPaper-elevation9",
-                    "outlined": "MuiPaper-outlined",
-                    "root": "MuiPaper-root",
-                    "rounded": "MuiPaper-rounded",
-                  }
-                }
-                square={false}
-              >
-                <div
-                  className="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
-                >
-                  <WithStyles(ForwardRef(AccordionSummary))
-                    aria-label="faq.accessibility.button_toggle_detail"
-                    classes={
-                      Object {
-                        "content": "expansion-panel-content",
-                        "root": "expansion-panel-summary small bold-text",
-                      }
-                    }
-                    expandIcon={
-                      <StyledIcon
-                        icon="test-file-stub"
-                      />
-                    }
-                    key=".0"
-                  >
-                    <ForwardRef(AccordionSummary)
-                      aria-label="faq.accessibility.button_toggle_detail"
-                      classes={
-                        Object {
-                          "content": "MuiAccordionSummary-content expansion-panel-content",
-                          "disabled": "Mui-disabled",
-                          "expandIcon": "MuiAccordionSummary-expandIcon",
-                          "expanded": "Mui-expanded",
-                          "focusVisible": "Mui-focusVisible",
-                          "focused": "Mui-focused",
-                          "root": "MuiAccordionSummary-root expansion-panel-summary small bold-text",
-                        }
-                      }
-                      expandIcon={
-                        <StyledIcon
-                          icon="test-file-stub"
-                        />
-                      }
-                    >
-                      <WithStyles(ForwardRef(ButtonBase))
-                        aria-expanded={false}
-                        aria-label="faq.accessibility.button_toggle_detail"
-                        className="MuiAccordionSummary-root expansion-panel-summary small bold-text"
-                        component="div"
-                        disableRipple={true}
-                        disabled={false}
-                        focusRipple={false}
-                        focusVisibleClassName="Mui-focusVisible Mui-focused"
-                        onClick={[Function]}
-                      >
-                        <ForwardRef(ButtonBase)
-                          aria-expanded={false}
-                          aria-label="faq.accessibility.button_toggle_detail"
-                          className="MuiAccordionSummary-root expansion-panel-summary small bold-text"
-                          classes={
-                            Object {
-                              "disabled": "Mui-disabled",
-                              "focusVisible": "Mui-focusVisible",
-                              "root": "MuiButtonBase-root",
-                            }
-                          }
-                          component="div"
-                          disableRipple={true}
-                          disabled={false}
-                          focusRipple={false}
-                          focusVisibleClassName="Mui-focusVisible Mui-focused"
-                          onClick={[Function]}
-                        >
-                          <div
-                            aria-disabled={false}
-                            aria-expanded={false}
-                            aria-label="faq.accessibility.button_toggle_detail"
-                            className="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary small bold-text"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onDragLeave={[Function]}
-                            onFocus={[Function]}
-                            onKeyDown={[Function]}
-                            onKeyUp={[Function]}
-                            onMouseDown={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                            onTouchEnd={[Function]}
-                            onTouchMove={[Function]}
-                            onTouchStart={[Function]}
-                            role="button"
-                            tabIndex={0}
-                          >
-                            <div
-                              className="MuiAccordionSummary-content expansion-panel-content"
-                            >
-                              Comment accéder à mes données électricité ?
-                            </div>
-                            <WithStyles(ForwardRef(IconButton))
-                              aria-hidden={true}
-                              className="MuiAccordionSummary-expandIcon"
-                              component="div"
-                              edge="end"
-                              role={null}
-                              tabIndex={null}
-                            >
-                              <ForwardRef(IconButton)
-                                aria-hidden={true}
-                                className="MuiAccordionSummary-expandIcon"
-                                classes={
-                                  Object {
-                                    "colorInherit": "MuiIconButton-colorInherit",
-                                    "colorPrimary": "MuiIconButton-colorPrimary",
-                                    "colorSecondary": "MuiIconButton-colorSecondary",
-                                    "disabled": "Mui-disabled",
-                                    "edgeEnd": "MuiIconButton-edgeEnd",
-                                    "edgeStart": "MuiIconButton-edgeStart",
-                                    "label": "MuiIconButton-label",
-                                    "root": "MuiIconButton-root",
-                                    "sizeSmall": "MuiIconButton-sizeSmall",
-                                  }
-                                }
-                                component="div"
-                                edge="end"
-                                role={null}
-                                tabIndex={null}
-                              >
-                                <WithStyles(ForwardRef(ButtonBase))
-                                  aria-hidden={true}
-                                  centerRipple={true}
-                                  className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
-                                  component="div"
-                                  disabled={false}
-                                  focusRipple={true}
-                                  role={null}
-                                  tabIndex={null}
-                                >
-                                  <ForwardRef(ButtonBase)
-                                    aria-hidden={true}
-                                    centerRipple={true}
-                                    className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
-                                    classes={
-                                      Object {
-                                        "disabled": "Mui-disabled",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "root": "MuiButtonBase-root",
-                                      }
-                                    }
-                                    component="div"
-                                    disabled={false}
-                                    focusRipple={true}
-                                    role={null}
-                                    tabIndex={null}
-                                  >
-                                    <div
-                                      aria-disabled={false}
-                                      aria-hidden={true}
-                                      className="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
-                                      onBlur={[Function]}
-                                      onDragLeave={[Function]}
-                                      onFocus={[Function]}
-                                      onKeyDown={[Function]}
-                                      onKeyUp={[Function]}
-                                      onMouseDown={[Function]}
-                                      onMouseLeave={[Function]}
-                                      onMouseUp={[Function]}
-                                      onTouchEnd={[Function]}
-                                      onTouchMove={[Function]}
-                                      onTouchStart={[Function]}
-                                      role={null}
-                                      tabIndex={null}
-                                    >
-                                      <span
-                                        className="MuiIconButton-label"
-                                      >
-                                        <StyledIcon
-                                          icon="test-file-stub"
-                                        >
-                                          <Icon
-                                            aria-hidden={true}
-                                            icon="test-file-stub"
-                                            size={16}
-                                            spin={false}
-                                          >
-                                            <Component
-                                              aria-hidden={true}
-                                              className="styles__icon___23x3R"
-                                              height={16}
-                                              style={Object {}}
-                                              width={16}
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="styles__icon___23x3R"
-                                                height={16}
-                                                style={Object {}}
-                                                width={16}
-                                              >
-                                                <use
-                                                  xlinkHref="#test-file-stub"
-                                                />
-                                              </svg>
-                                            </Component>
-                                          </Icon>
-                                        </StyledIcon>
-                                      </span>
-                                      <WithStyles(memo)
-                                        center={true}
-                                      >
-                                        <ForwardRef(TouchRipple)
-                                          center={true}
-                                          classes={
-                                            Object {
-                                              "child": "MuiTouchRipple-child",
-                                              "childLeaving": "MuiTouchRipple-childLeaving",
-                                              "childPulsate": "MuiTouchRipple-childPulsate",
-                                              "ripple": "MuiTouchRipple-ripple",
-                                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                              "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                              "root": "MuiTouchRipple-root",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="MuiTouchRipple-root"
-                                          >
-                                            <TransitionGroup
-                                              childFactory={[Function]}
-                                              component={null}
-                                              exit={true}
-                                            />
-                                          </span>
-                                        </ForwardRef(TouchRipple)>
-                                      </WithStyles(memo)>
-                                    </div>
-                                  </ForwardRef(ButtonBase)>
-                                </WithStyles(ForwardRef(ButtonBase))>
-                              </ForwardRef(IconButton)>
-                            </WithStyles(ForwardRef(IconButton))>
-                          </div>
-                        </ForwardRef(ButtonBase)>
-                      </WithStyles(ForwardRef(ButtonBase))>
-                    </ForwardRef(AccordionSummary)>
-                  </WithStyles(ForwardRef(AccordionSummary))>
-                  <WithStyles(ForwardRef(Collapse))
-                    in={false}
-                    timeout="auto"
-                  >
-                    <ForwardRef(Collapse)
-                      classes={
-                        Object {
-                          "entered": "MuiCollapse-entered",
-                          "hidden": "MuiCollapse-hidden",
-                          "root": "MuiCollapse-root",
-                          "wrapper": "MuiCollapse-wrapper",
-                          "wrapperInner": "MuiCollapse-wrapperInner",
-                        }
-                      }
-                      in={false}
-                      timeout="auto"
-                    >
-                      <Transition
-                        addEndListener={[Function]}
-                        appear={false}
-                        enter={true}
-                        exit={true}
-                        in={false}
-                        mountOnEnter={false}
-                        onEnter={[Function]}
-                        onEntered={[Function]}
-                        onEntering={[Function]}
-                        onExit={[Function]}
-                        onExited={[Function]}
-                        onExiting={[Function]}
-                        timeout={null}
-                        unmountOnExit={false}
-                      >
-                        <div
-                          className="MuiCollapse-root MuiCollapse-hidden"
-                          style={
-                            Object {
-                              "minHeight": "0px",
-                            }
-                          }
-                        >
-                          <div
-                            className="MuiCollapse-wrapper"
-                          >
-                            <div
-                              className="MuiCollapse-wrapperInner"
-                            >
-                              <div
-                                role="region"
-                              >
-                                <WithStyles(ForwardRef(AccordionDetails))
-                                  classes={
-                                    Object {
-                                      "root": "expansion-panel-details",
-                                    }
-                                  }
-                                  key=".1"
-                                >
-                                  <ForwardRef(AccordionDetails)
-                                    classes={
-                                      Object {
-                                        "root": "MuiAccordionDetails-root expansion-panel-details",
-                                      }
-                                    }
-                                  >
-                                    <div
-                                      className="MuiAccordionDetails-root expansion-panel-details"
-                                    >
-                                      <div>
-                                        Rendez-vous dans la partie Options du service et cliquer sur le bouton "Se connecter à l\\'électricité". Suivez la procédure (en vous créant un compte Enedis si nécessaire). Une fois votre consentement donné, vos données de consommation seront récupérées.
-                                      </div>
-                                    </div>
-                                  </ForwardRef(AccordionDetails)>
-                                </WithStyles(ForwardRef(AccordionDetails))>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </Transition>
-                    </ForwardRef(Collapse)>
-                  </WithStyles(ForwardRef(Collapse))>
-                </div>
-              </ForwardRef(Paper)>
-            </WithStyles(ForwardRef(Paper))>
-          </ForwardRef(Accordion)>
-        </WithStyles(ForwardRef(Accordion))>
-        <WithStyles(ForwardRef(Accordion))
-          classes={
-            Object {
-              "root": "expansion-panel-root",
-            }
-          }
-          expanded={false}
-          key="1"
-          onChange={[Function]}
-        >
-          <ForwardRef(Accordion)
-            classes={
-              Object {
-                "disabled": "Mui-disabled",
-                "expanded": "Mui-expanded",
-                "root": "MuiAccordion-root expansion-panel-root",
-                "rounded": "MuiAccordion-rounded",
-              }
-            }
-            expanded={false}
-            onChange={[Function]}
-          >
-            <WithStyles(ForwardRef(Paper))
-              className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
-              square={false}
-            >
-              <ForwardRef(Paper)
-                className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
-                classes={
-                  Object {
-                    "elevation0": "MuiPaper-elevation0",
-                    "elevation1": "MuiPaper-elevation1",
-                    "elevation10": "MuiPaper-elevation10",
-                    "elevation11": "MuiPaper-elevation11",
-                    "elevation12": "MuiPaper-elevation12",
-                    "elevation13": "MuiPaper-elevation13",
-                    "elevation14": "MuiPaper-elevation14",
-                    "elevation15": "MuiPaper-elevation15",
-                    "elevation16": "MuiPaper-elevation16",
-                    "elevation17": "MuiPaper-elevation17",
-                    "elevation18": "MuiPaper-elevation18",
-                    "elevation19": "MuiPaper-elevation19",
-                    "elevation2": "MuiPaper-elevation2",
-                    "elevation20": "MuiPaper-elevation20",
-                    "elevation21": "MuiPaper-elevation21",
-                    "elevation22": "MuiPaper-elevation22",
-                    "elevation23": "MuiPaper-elevation23",
-                    "elevation24": "MuiPaper-elevation24",
-                    "elevation3": "MuiPaper-elevation3",
-                    "elevation4": "MuiPaper-elevation4",
-                    "elevation5": "MuiPaper-elevation5",
-                    "elevation6": "MuiPaper-elevation6",
-                    "elevation7": "MuiPaper-elevation7",
-                    "elevation8": "MuiPaper-elevation8",
-                    "elevation9": "MuiPaper-elevation9",
-                    "outlined": "MuiPaper-outlined",
-                    "root": "MuiPaper-root",
-                    "rounded": "MuiPaper-rounded",
-                  }
-                }
-                square={false}
-              >
-                <div
-                  className="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
-                >
-                  <WithStyles(ForwardRef(AccordionSummary))
-                    aria-label="faq.accessibility.button_toggle_detail"
-                    classes={
-                      Object {
-                        "content": "expansion-panel-content",
-                        "root": "expansion-panel-summary small bold-text",
-                      }
-                    }
-                    expandIcon={
-                      <StyledIcon
-                        icon="test-file-stub"
-                      />
-                    }
-                    key=".0"
-                  >
-                    <ForwardRef(AccordionSummary)
-                      aria-label="faq.accessibility.button_toggle_detail"
-                      classes={
-                        Object {
-                          "content": "MuiAccordionSummary-content expansion-panel-content",
-                          "disabled": "Mui-disabled",
-                          "expandIcon": "MuiAccordionSummary-expandIcon",
-                          "expanded": "Mui-expanded",
-                          "focusVisible": "Mui-focusVisible",
-                          "focused": "Mui-focused",
-                          "root": "MuiAccordionSummary-root expansion-panel-summary small bold-text",
-                        }
-                      }
-                      expandIcon={
-                        <StyledIcon
-                          icon="test-file-stub"
-                        />
-                      }
-                    >
-                      <WithStyles(ForwardRef(ButtonBase))
-                        aria-expanded={false}
-                        aria-label="faq.accessibility.button_toggle_detail"
-                        className="MuiAccordionSummary-root expansion-panel-summary small bold-text"
-                        component="div"
-                        disableRipple={true}
-                        disabled={false}
-                        focusRipple={false}
-                        focusVisibleClassName="Mui-focusVisible Mui-focused"
-                        onClick={[Function]}
-                      >
-                        <ForwardRef(ButtonBase)
-                          aria-expanded={false}
-                          aria-label="faq.accessibility.button_toggle_detail"
-                          className="MuiAccordionSummary-root expansion-panel-summary small bold-text"
-                          classes={
-                            Object {
-                              "disabled": "Mui-disabled",
-                              "focusVisible": "Mui-focusVisible",
-                              "root": "MuiButtonBase-root",
-                            }
-                          }
-                          component="div"
-                          disableRipple={true}
-                          disabled={false}
-                          focusRipple={false}
-                          focusVisibleClassName="Mui-focusVisible Mui-focused"
-                          onClick={[Function]}
-                        >
-                          <div
-                            aria-disabled={false}
-                            aria-expanded={false}
-                            aria-label="faq.accessibility.button_toggle_detail"
-                            className="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary small bold-text"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onDragLeave={[Function]}
-                            onFocus={[Function]}
-                            onKeyDown={[Function]}
-                            onKeyUp={[Function]}
-                            onMouseDown={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                            onTouchEnd={[Function]}
-                            onTouchMove={[Function]}
-                            onTouchStart={[Function]}
-                            role="button"
-                            tabIndex={0}
-                          >
-                            <div
-                              className="MuiAccordionSummary-content expansion-panel-content"
-                            >
-                              Comment accéder à mes données gaz ?
-                            </div>
-                            <WithStyles(ForwardRef(IconButton))
-                              aria-hidden={true}
-                              className="MuiAccordionSummary-expandIcon"
-                              component="div"
-                              edge="end"
-                              role={null}
-                              tabIndex={null}
-                            >
-                              <ForwardRef(IconButton)
-                                aria-hidden={true}
-                                className="MuiAccordionSummary-expandIcon"
-                                classes={
-                                  Object {
-                                    "colorInherit": "MuiIconButton-colorInherit",
-                                    "colorPrimary": "MuiIconButton-colorPrimary",
-                                    "colorSecondary": "MuiIconButton-colorSecondary",
-                                    "disabled": "Mui-disabled",
-                                    "edgeEnd": "MuiIconButton-edgeEnd",
-                                    "edgeStart": "MuiIconButton-edgeStart",
-                                    "label": "MuiIconButton-label",
-                                    "root": "MuiIconButton-root",
-                                    "sizeSmall": "MuiIconButton-sizeSmall",
-                                  }
-                                }
-                                component="div"
-                                edge="end"
-                                role={null}
-                                tabIndex={null}
-                              >
-                                <WithStyles(ForwardRef(ButtonBase))
-                                  aria-hidden={true}
-                                  centerRipple={true}
-                                  className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
-                                  component="div"
-                                  disabled={false}
-                                  focusRipple={true}
-                                  role={null}
-                                  tabIndex={null}
-                                >
-                                  <ForwardRef(ButtonBase)
-                                    aria-hidden={true}
-                                    centerRipple={true}
-                                    className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
-                                    classes={
-                                      Object {
-                                        "disabled": "Mui-disabled",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "root": "MuiButtonBase-root",
-                                      }
-                                    }
-                                    component="div"
-                                    disabled={false}
-                                    focusRipple={true}
-                                    role={null}
-                                    tabIndex={null}
-                                  >
-                                    <div
-                                      aria-disabled={false}
-                                      aria-hidden={true}
-                                      className="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
-                                      onBlur={[Function]}
-                                      onDragLeave={[Function]}
-                                      onFocus={[Function]}
-                                      onKeyDown={[Function]}
-                                      onKeyUp={[Function]}
-                                      onMouseDown={[Function]}
-                                      onMouseLeave={[Function]}
-                                      onMouseUp={[Function]}
-                                      onTouchEnd={[Function]}
-                                      onTouchMove={[Function]}
-                                      onTouchStart={[Function]}
-                                      role={null}
-                                      tabIndex={null}
-                                    >
-                                      <span
-                                        className="MuiIconButton-label"
-                                      >
-                                        <StyledIcon
-                                          icon="test-file-stub"
-                                        >
-                                          <Icon
-                                            aria-hidden={true}
-                                            icon="test-file-stub"
-                                            size={16}
-                                            spin={false}
-                                          >
-                                            <Component
-                                              aria-hidden={true}
-                                              className="styles__icon___23x3R"
-                                              height={16}
-                                              style={Object {}}
-                                              width={16}
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="styles__icon___23x3R"
-                                                height={16}
-                                                style={Object {}}
-                                                width={16}
-                                              >
-                                                <use
-                                                  xlinkHref="#test-file-stub"
-                                                />
-                                              </svg>
-                                            </Component>
-                                          </Icon>
-                                        </StyledIcon>
-                                      </span>
-                                      <WithStyles(memo)
-                                        center={true}
-                                      >
-                                        <ForwardRef(TouchRipple)
-                                          center={true}
-                                          classes={
-                                            Object {
-                                              "child": "MuiTouchRipple-child",
-                                              "childLeaving": "MuiTouchRipple-childLeaving",
-                                              "childPulsate": "MuiTouchRipple-childPulsate",
-                                              "ripple": "MuiTouchRipple-ripple",
-                                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                              "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                              "root": "MuiTouchRipple-root",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="MuiTouchRipple-root"
-                                          >
-                                            <TransitionGroup
-                                              childFactory={[Function]}
-                                              component={null}
-                                              exit={true}
-                                            />
-                                          </span>
-                                        </ForwardRef(TouchRipple)>
-                                      </WithStyles(memo)>
-                                    </div>
-                                  </ForwardRef(ButtonBase)>
-                                </WithStyles(ForwardRef(ButtonBase))>
-                              </ForwardRef(IconButton)>
-                            </WithStyles(ForwardRef(IconButton))>
-                          </div>
-                        </ForwardRef(ButtonBase)>
-                      </WithStyles(ForwardRef(ButtonBase))>
-                    </ForwardRef(AccordionSummary)>
-                  </WithStyles(ForwardRef(AccordionSummary))>
-                  <WithStyles(ForwardRef(Collapse))
-                    in={false}
-                    timeout="auto"
-                  >
-                    <ForwardRef(Collapse)
-                      classes={
-                        Object {
-                          "entered": "MuiCollapse-entered",
-                          "hidden": "MuiCollapse-hidden",
-                          "root": "MuiCollapse-root",
-                          "wrapper": "MuiCollapse-wrapper",
-                          "wrapperInner": "MuiCollapse-wrapperInner",
-                        }
-                      }
-                      in={false}
-                      timeout="auto"
-                    >
-                      <Transition
-                        addEndListener={[Function]}
-                        appear={false}
-                        enter={true}
-                        exit={true}
-                        in={false}
-                        mountOnEnter={false}
-                        onEnter={[Function]}
-                        onEntered={[Function]}
-                        onEntering={[Function]}
-                        onExit={[Function]}
-                        onExited={[Function]}
-                        onExiting={[Function]}
-                        timeout={null}
-                        unmountOnExit={false}
-                      >
-                        <div
-                          className="MuiCollapse-root MuiCollapse-hidden"
-                          style={
-                            Object {
-                              "minHeight": "0px",
-                            }
-                          }
-                        >
-                          <div
-                            className="MuiCollapse-wrapper"
-                          >
-                            <div
-                              className="MuiCollapse-wrapperInner"
-                            >
-                              <div
-                                role="region"
-                              >
-                                <WithStyles(ForwardRef(AccordionDetails))
-                                  classes={
-                                    Object {
-                                      "root": "expansion-panel-details",
-                                    }
-                                  }
-                                  key=".1"
-                                >
-                                  <ForwardRef(AccordionDetails)
-                                    classes={
-                                      Object {
-                                        "root": "MuiAccordionDetails-root expansion-panel-details",
-                                      }
-                                    }
-                                  >
-                                    <div
-                                      className="MuiAccordionDetails-root expansion-panel-details"
-                                    >
-                                      <div>
-                                        Rendez-vous dans la partie Options du service et cliquez sur le bouton "Se connecter au gaz". Suivez la procédure (en vous créant un compte GRDF si nécessaire). Une fois votre consentement donné, vos données de consommation seront récupérées.',
-                                      </div>
-                                    </div>
-                                  </ForwardRef(AccordionDetails)>
-                                </WithStyles(ForwardRef(AccordionDetails))>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </Transition>
-                    </ForwardRef(Collapse)>
-                  </WithStyles(ForwardRef(Collapse))>
-                </div>
-              </ForwardRef(Paper)>
-            </WithStyles(ForwardRef(Paper))>
-          </ForwardRef(Accordion)>
-        </WithStyles(ForwardRef(Accordion))>
-      </div>
-      <div
-        className="faq-section"
-        key="1"
-      >
-        <div
-          className="text-16-normal-uppercase"
-        >
-          Contenu du service
-        </div>
-        <WithStyles(ForwardRef(Accordion))
-          classes={
-            Object {
-              "root": "expansion-panel-root",
-            }
-          }
-          expanded={false}
-          key="0"
-          onChange={[Function]}
-        >
-          <ForwardRef(Accordion)
-            classes={
-              Object {
-                "disabled": "Mui-disabled",
-                "expanded": "Mui-expanded",
-                "root": "MuiAccordion-root expansion-panel-root",
-                "rounded": "MuiAccordion-rounded",
-              }
-            }
-            expanded={false}
-            onChange={[Function]}
-          >
-            <WithStyles(ForwardRef(Paper))
-              className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
-              square={false}
-            >
-              <ForwardRef(Paper)
-                className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
-                classes={
-                  Object {
-                    "elevation0": "MuiPaper-elevation0",
-                    "elevation1": "MuiPaper-elevation1",
-                    "elevation10": "MuiPaper-elevation10",
-                    "elevation11": "MuiPaper-elevation11",
-                    "elevation12": "MuiPaper-elevation12",
-                    "elevation13": "MuiPaper-elevation13",
-                    "elevation14": "MuiPaper-elevation14",
-                    "elevation15": "MuiPaper-elevation15",
-                    "elevation16": "MuiPaper-elevation16",
-                    "elevation17": "MuiPaper-elevation17",
-                    "elevation18": "MuiPaper-elevation18",
-                    "elevation19": "MuiPaper-elevation19",
-                    "elevation2": "MuiPaper-elevation2",
-                    "elevation20": "MuiPaper-elevation20",
-                    "elevation21": "MuiPaper-elevation21",
-                    "elevation22": "MuiPaper-elevation22",
-                    "elevation23": "MuiPaper-elevation23",
-                    "elevation24": "MuiPaper-elevation24",
-                    "elevation3": "MuiPaper-elevation3",
-                    "elevation4": "MuiPaper-elevation4",
-                    "elevation5": "MuiPaper-elevation5",
-                    "elevation6": "MuiPaper-elevation6",
-                    "elevation7": "MuiPaper-elevation7",
-                    "elevation8": "MuiPaper-elevation8",
-                    "elevation9": "MuiPaper-elevation9",
-                    "outlined": "MuiPaper-outlined",
-                    "root": "MuiPaper-root",
-                    "rounded": "MuiPaper-rounded",
-                  }
-                }
-                square={false}
-              >
-                <div
-                  className="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
-                >
-                  <WithStyles(ForwardRef(AccordionSummary))
-                    aria-label="faq.accessibility.button_toggle_detail"
-                    classes={
-                      Object {
-                        "content": "expansion-panel-content",
-                        "root": "expansion-panel-summary small bold-text",
-                      }
-                    }
-                    expandIcon={
-                      <StyledIcon
-                        icon="test-file-stub"
-                      />
-                    }
-                    key=".0"
-                  >
-                    <ForwardRef(AccordionSummary)
-                      aria-label="faq.accessibility.button_toggle_detail"
-                      classes={
-                        Object {
-                          "content": "MuiAccordionSummary-content expansion-panel-content",
-                          "disabled": "Mui-disabled",
-                          "expandIcon": "MuiAccordionSummary-expandIcon",
-                          "expanded": "Mui-expanded",
-                          "focusVisible": "Mui-focusVisible",
-                          "focused": "Mui-focused",
-                          "root": "MuiAccordionSummary-root expansion-panel-summary small bold-text",
-                        }
-                      }
-                      expandIcon={
-                        <StyledIcon
-                          icon="test-file-stub"
-                        />
-                      }
-                    >
-                      <WithStyles(ForwardRef(ButtonBase))
-                        aria-expanded={false}
-                        aria-label="faq.accessibility.button_toggle_detail"
-                        className="MuiAccordionSummary-root expansion-panel-summary small bold-text"
-                        component="div"
-                        disableRipple={true}
-                        disabled={false}
-                        focusRipple={false}
-                        focusVisibleClassName="Mui-focusVisible Mui-focused"
-                        onClick={[Function]}
-                      >
-                        <ForwardRef(ButtonBase)
-                          aria-expanded={false}
-                          aria-label="faq.accessibility.button_toggle_detail"
-                          className="MuiAccordionSummary-root expansion-panel-summary small bold-text"
-                          classes={
-                            Object {
-                              "disabled": "Mui-disabled",
-                              "focusVisible": "Mui-focusVisible",
-                              "root": "MuiButtonBase-root",
-                            }
-                          }
-                          component="div"
-                          disableRipple={true}
-                          disabled={false}
-                          focusRipple={false}
-                          focusVisibleClassName="Mui-focusVisible Mui-focused"
-                          onClick={[Function]}
-                        >
-                          <div
-                            aria-disabled={false}
-                            aria-expanded={false}
-                            aria-label="faq.accessibility.button_toggle_detail"
-                            className="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary small bold-text"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onDragLeave={[Function]}
-                            onFocus={[Function]}
-                            onKeyDown={[Function]}
-                            onKeyUp={[Function]}
-                            onMouseDown={[Function]}
-                            onMouseLeave={[Function]}
-                            onMouseUp={[Function]}
-                            onTouchEnd={[Function]}
-                            onTouchMove={[Function]}
-                            onTouchStart={[Function]}
-                            role="button"
-                            tabIndex={0}
-                          >
-                            <div
-                              className="MuiAccordionSummary-content expansion-panel-content"
-                            >
-                              Pourquoi les prix affichés sont-ils différents de ceux indiqués sur ma facture ?
-                            </div>
-                            <WithStyles(ForwardRef(IconButton))
-                              aria-hidden={true}
-                              className="MuiAccordionSummary-expandIcon"
-                              component="div"
-                              edge="end"
-                              role={null}
-                              tabIndex={null}
-                            >
-                              <ForwardRef(IconButton)
-                                aria-hidden={true}
-                                className="MuiAccordionSummary-expandIcon"
-                                classes={
-                                  Object {
-                                    "colorInherit": "MuiIconButton-colorInherit",
-                                    "colorPrimary": "MuiIconButton-colorPrimary",
-                                    "colorSecondary": "MuiIconButton-colorSecondary",
-                                    "disabled": "Mui-disabled",
-                                    "edgeEnd": "MuiIconButton-edgeEnd",
-                                    "edgeStart": "MuiIconButton-edgeStart",
-                                    "label": "MuiIconButton-label",
-                                    "root": "MuiIconButton-root",
-                                    "sizeSmall": "MuiIconButton-sizeSmall",
-                                  }
-                                }
-                                component="div"
-                                edge="end"
-                                role={null}
-                                tabIndex={null}
-                              >
-                                <WithStyles(ForwardRef(ButtonBase))
-                                  aria-hidden={true}
-                                  centerRipple={true}
-                                  className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
-                                  component="div"
-                                  disabled={false}
-                                  focusRipple={true}
-                                  role={null}
-                                  tabIndex={null}
-                                >
-                                  <ForwardRef(ButtonBase)
-                                    aria-hidden={true}
-                                    centerRipple={true}
-                                    className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
-                                    classes={
-                                      Object {
-                                        "disabled": "Mui-disabled",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "root": "MuiButtonBase-root",
-                                      }
-                                    }
-                                    component="div"
-                                    disabled={false}
-                                    focusRipple={true}
-                                    role={null}
-                                    tabIndex={null}
-                                  >
-                                    <div
-                                      aria-disabled={false}
-                                      aria-hidden={true}
-                                      className="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
-                                      onBlur={[Function]}
-                                      onDragLeave={[Function]}
-                                      onFocus={[Function]}
-                                      onKeyDown={[Function]}
-                                      onKeyUp={[Function]}
-                                      onMouseDown={[Function]}
-                                      onMouseLeave={[Function]}
-                                      onMouseUp={[Function]}
-                                      onTouchEnd={[Function]}
-                                      onTouchMove={[Function]}
-                                      onTouchStart={[Function]}
-                                      role={null}
-                                      tabIndex={null}
-                                    >
-                                      <span
-                                        className="MuiIconButton-label"
-                                      >
-                                        <StyledIcon
-                                          icon="test-file-stub"
-                                        >
-                                          <Icon
-                                            aria-hidden={true}
-                                            icon="test-file-stub"
-                                            size={16}
-                                            spin={false}
-                                          >
-                                            <Component
-                                              aria-hidden={true}
-                                              className="styles__icon___23x3R"
-                                              height={16}
-                                              style={Object {}}
-                                              width={16}
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="styles__icon___23x3R"
-                                                height={16}
-                                                style={Object {}}
-                                                width={16}
-                                              >
-                                                <use
-                                                  xlinkHref="#test-file-stub"
-                                                />
-                                              </svg>
-                                            </Component>
-                                          </Icon>
-                                        </StyledIcon>
-                                      </span>
-                                      <WithStyles(memo)
-                                        center={true}
-                                      >
-                                        <ForwardRef(TouchRipple)
-                                          center={true}
-                                          classes={
-                                            Object {
-                                              "child": "MuiTouchRipple-child",
-                                              "childLeaving": "MuiTouchRipple-childLeaving",
-                                              "childPulsate": "MuiTouchRipple-childPulsate",
-                                              "ripple": "MuiTouchRipple-ripple",
-                                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                              "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                              "root": "MuiTouchRipple-root",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="MuiTouchRipple-root"
-                                          >
-                                            <TransitionGroup
-                                              childFactory={[Function]}
-                                              component={null}
-                                              exit={true}
-                                            />
-                                          </span>
-                                        </ForwardRef(TouchRipple)>
-                                      </WithStyles(memo)>
-                                    </div>
-                                  </ForwardRef(ButtonBase)>
-                                </WithStyles(ForwardRef(ButtonBase))>
-                              </ForwardRef(IconButton)>
-                            </WithStyles(ForwardRef(IconButton))>
-                          </div>
-                        </ForwardRef(ButtonBase)>
-                      </WithStyles(ForwardRef(ButtonBase))>
-                    </ForwardRef(AccordionSummary)>
-                  </WithStyles(ForwardRef(AccordionSummary))>
-                  <WithStyles(ForwardRef(Collapse))
-                    in={false}
-                    timeout="auto"
-                  >
-                    <ForwardRef(Collapse)
-                      classes={
-                        Object {
-                          "entered": "MuiCollapse-entered",
-                          "hidden": "MuiCollapse-hidden",
-                          "root": "MuiCollapse-root",
-                          "wrapper": "MuiCollapse-wrapper",
-                          "wrapperInner": "MuiCollapse-wrapperInner",
-                        }
-                      }
-                      in={false}
-                      timeout="auto"
-                    >
-                      <Transition
-                        addEndListener={[Function]}
-                        appear={false}
-                        enter={true}
-                        exit={true}
-                        in={false}
-                        mountOnEnter={false}
-                        onEnter={[Function]}
-                        onEntered={[Function]}
-                        onEntering={[Function]}
-                        onExit={[Function]}
-                        onExited={[Function]}
-                        onExiting={[Function]}
-                        timeout={null}
-                        unmountOnExit={false}
-                      >
-                        <div
-                          className="MuiCollapse-root MuiCollapse-hidden"
-                          style={
-                            Object {
-                              "minHeight": "0px",
-                            }
-                          }
-                        >
-                          <div
-                            className="MuiCollapse-wrapper"
-                          >
-                            <div
-                              className="MuiCollapse-wrapperInner"
-                            >
-                              <div
-                                role="region"
-                              >
-                                <WithStyles(ForwardRef(AccordionDetails))
-                                  classes={
-                                    Object {
-                                      "root": "expansion-panel-details",
-                                    }
-                                  }
-                                  key=".1"
-                                >
-                                  <ForwardRef(AccordionDetails)
-                                    classes={
-                                      Object {
-                                        "root": "MuiAccordionDetails-root expansion-panel-details",
-                                      }
-                                    }
-                                  >
-                                    <div
-                                      className="MuiAccordionDetails-root expansion-panel-details"
-                                    >
-                                      <div>
-                                        <p>
-                                          Le prix de votre électricité ou de votre gaz dépend de l'offre choisie auprès de votre fournisseur. N’ayant pas accès à cette information, Ecolyo affiche un prix moyen par fluide.
-                                        </p>
-                                        <p>
-                                          Tarifs moyens retenus :
-                                        </p>
-                                      </div>
-                                    </div>
-                                  </ForwardRef(AccordionDetails)>
-                                </WithStyles(ForwardRef(AccordionDetails))>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </Transition>
-                    </ForwardRef(Collapse)>
-                  </WithStyles(ForwardRef(Collapse))>
-                </div>
-              </ForwardRef(Paper)>
-            </WithStyles(ForwardRef(Paper))>
-          </ForwardRef(Accordion)>
-        </WithStyles(ForwardRef(Accordion))>
-      </div>
-    </div>
-  </div>
-</FAQContent>
-`;
diff --git a/src/components/FAQ/__snapshots__/FAQView.spec.tsx.snap b/src/components/FAQ/__snapshots__/FAQView.spec.tsx.snap
deleted file mode 100644
index 285ef8a29c5ce9475e1167d5d092bfd17c0099e4..0000000000000000000000000000000000000000
--- a/src/components/FAQ/__snapshots__/FAQView.spec.tsx.snap
+++ /dev/null
@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FAQView component should render only the parent component 1`] = `
-<React.Fragment>
-  <mock-cozybar
-    displayBackArrow={true}
-    titleKey="common.title_faq"
-  />
-  <mock-header
-    desktopTitleKey="common.title_faq"
-    displayBackArrow={true}
-    setHeaderHeight={[Function]}
-  />
-  <mock-content
-    height={0}
-  >
-    <FAQContent />
-  </mock-content>
-</React.Fragment>
-`;
diff --git a/src/components/FAQ/faqContent.scss b/src/components/FAQ/faqContent.scss
deleted file mode 100644
index c8cae55585fd727a36578775cf5514c5d21ec5b4..0000000000000000000000000000000000000000
--- a/src/components/FAQ/faqContent.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-
-// FAQ
-.faq-view-root {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  margin: 1.5rem;
-  .faq-view-content {
-    width: 45.75rem;
-    @media #{$large-phone} {
-      width: 100%;
-    }
-  }
-}
-
-.faq-spinner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100%;
-  @media #{$large-phone} {
-    min-height: inherit;
-  }
-}
-
-.faq-section {
-  color: $grey-bright;
-  padding-top: 1rem;
-  .expansion-panel-details {
-    div {
-      padding-bottom: 0.6rem;
-      p {
-        color: $grey-bright;
-        margin-block-start: 0;
-        margin-block-end: 0.6rem;
-      }
-      p:last-child {
-        margin-block-end: 0rem;
-      }
-    }
-  }
-}
diff --git a/src/components/FAQ/faqLink.scss b/src/components/FAQ/faqLink.scss
deleted file mode 100644
index 270865127a3360756bb611b54b36a37e220c3fd0..0000000000000000000000000000000000000000
--- a/src/components/FAQ/faqLink.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@import 'src/styles/base/color';
-@import 'src/styles/base/breakpoint';
-
-// FAQContainer
-.faq-root {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1.5rem;
-  margin-top: 2rem;
-  .faq-content {
-    width: 45.75rem;
-    a {
-      color: $white;
-      text-decoration: none;
-    }
-    @media #{$large-phone} {
-      width: 100%;
-    }
-    .faq-header {
-      margin-bottom: 1rem;
-      color: $grey-bright;
-    }
-  }
-}
-
-.faq-card-link {
-  color: $white;
-}
-.faq-card {
-  display: flex;
-  flex-direction: row;
-  margin: -0.75rem 0;
-  width: 100%;
-  @media #{$large-phone} {
-    width: 100%;
-  }
-  .faq-card-content {
-    display: flex;
-    flex-direction: row;
-    .faq-card-content-icon {
-      margin: 0.5rem 0;
-    }
-    .faq-card-content-title {
-      margin: 0 1rem;
-      align-self: center;
-      text-decoration: none;
-    }
-  }
-}
diff --git a/src/components/Feedback/FeedbackModal.spec.tsx b/src/components/Feedback/FeedbackModal.spec.tsx
index 3a5a63748ee16066ca0b263c49899a9950e8fe59..93bbd7f6118c569254491cb1e22bd949b9bc34f7 100644
--- a/src/components/Feedback/FeedbackModal.spec.tsx
+++ b/src/components/Feedback/FeedbackModal.spec.tsx
@@ -1,17 +1,18 @@
 import React from 'react'
+import { BrowserRouter } from 'react-router-dom'
 import * as reactRedux from 'react-redux'
+import { Provider } from 'react-redux'
 import { mount } from 'enzyme'
 import FeedbackModal from 'components/Feedback/FeedbackModal'
-
-import Button from '@material-ui/core/Button'
 import { userChallengeExplo1OnGoing } from '../../../tests/__mocks__/userChallengeData.mock'
-import { Provider } from 'react-redux'
 import {
   createMockStore,
   mockInitialEcolyoState,
 } from '../../../tests/__mocks__/store'
 import { act } from 'react-dom/test-utils'
-import { BrowserRouter } from 'react-router-dom'
+
+// Value coming from jest.config
+declare let __SAU_LINK__: string
 
 jest.mock('cozy-ui/transpiled/react/I18n', () => {
   return {
@@ -31,29 +32,18 @@ jest.mock('services/environment.service', () => {
   })
 })
 
-const mockSendMail = jest.fn()
-jest.mock('services/mail.service', () => {
-  return jest.fn(() => {
-    return {
-      SendMail: mockSendMail,
-    }
-  })
-})
-
 const handleFeedbackModalClose = jest.fn()
 
 const mockUseSelector = jest.spyOn(reactRedux, 'useSelector')
 const mockUseDispatch = jest.spyOn(reactRedux, 'useDispatch')
 
 describe('FeedbackModal component', () => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let store: any
   beforeEach(() => {
     store = createMockStore(mockInitialEcolyoState)
   })
   it('should render the component', () => {
     mockUseDispatch.mockReturnValue(jest.fn())
-    mockUseSelector.mockReturnValue(userChallengeExplo1OnGoing)
     const component = mount(
       <Provider store={store}>
         <BrowserRouter>
@@ -68,83 +58,12 @@ describe('FeedbackModal component', () => {
   })
 })
 describe('FeedbackModal functionnalities', () => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let store: any
   beforeEach(() => {
     store = createMockStore(mockInitialEcolyoState)
   })
-  it('should should send an email to the support', () => {
-    mockUseDispatch.mockReturnValue(jest.fn())
-    mockUseSelector.mockReturnValue(userChallengeExplo1OnGoing)
-
-    const wrapper = mount(
-      <Provider store={store}>
-        <BrowserRouter>
-          <FeedbackModal
-            open={true}
-            handleCloseClick={handleFeedbackModalClose}
-          />
-        </BrowserRouter>
-      </Provider>
-    )
-
-    const mockPlatform = 'platform'
-    const mockVendor = 'vendor'
-    const mockUserAgent = 'userAgent'
-    Object.defineProperty(navigator, 'platform', { value: mockPlatform })
-    Object.defineProperty(navigator, 'vendor', { value: mockVendor })
-    Object.defineProperty(navigator, 'userAgent', { value: mockUserAgent })
 
-    const expectedMailData = {
-      mode: 'from',
-      to: [
-        {
-          name: 'Support',
-          email: 'ecolyo@grandlyon.com',
-        },
-      ],
-      subject: '[Ecolyo] - Feedbacks - feedback.type_bug',
-      attachments: [],
-      parts: [
-        {
-          type: 'text/plain',
-          body:
-            'Type: feedback.type_bug\n' +
-            '\n' +
-            'Description:\n' +
-            'La description\n' +
-            'Ecolyo\n' +
-            'v0.0.0\n' +
-            '\n' +
-            'Location: http://localhost/\n' +
-            '\n' +
-            'Browser:\n' +
-            'On null\n' +
-            'From null\n' +
-            'null\n' +
-            '\n' +
-            'Navigator:' +
-            `\nOn ${mockPlatform}` +
-            `\nFrom ${mockVendor}` +
-            `\n${mockUserAgent}`,
-        },
-      ],
-    }
-
-    wrapper.find('div.fb-selector-item').first().simulate('click')
-    wrapper.find('#idFeedbackDescription').simulate('change', {
-      target: {
-        value: 'La description',
-      },
-    })
-    wrapper.find(Button).simulate('click')
-
-    expect(mockSendMail).toHaveBeenCalledWith(
-      expect.anything(),
-      expectedMailData
-    )
-  })
-  it('should close the modal and reset the inputs', async () => {
+  it('should close the modal', async () => {
     mockUseDispatch.mockReturnValue(jest.fn())
     mockUseSelector.mockReturnValue(userChallengeExplo1OnGoing)
     const wrapper = mount(
@@ -161,18 +80,16 @@ describe('FeedbackModal functionnalities', () => {
       await new Promise(resolve => setTimeout(resolve))
       wrapper.update()
     })
-    wrapper.find('#idFeedbackDescription').simulate('change', {
-      target: {
-        value: 'La description',
-      },
-    })
+
     wrapper.find('.modal-paper-close-button').first().simulate('click')
     expect(handleFeedbackModalClose).toHaveBeenCalledTimes(1)
-    setTimeout(() => {
-      expect(wrapper.find('#idFeedbackDescription').prop('value')).toBe('')
-    })
+    wrapper.find('.btn-secondary-positive').first().simulate('click')
+    expect(handleFeedbackModalClose).toHaveBeenCalledTimes(2)
   })
-  it('should upload the image', async () => {
+
+  it('should open the SAU link', () => {
+    global.open = jest.fn()
+
     const wrapper = mount(
       <Provider store={store}>
         <BrowserRouter>
@@ -183,14 +100,8 @@ describe('FeedbackModal functionnalities', () => {
         </BrowserRouter>
       </Provider>
     )
-    await act(async () => {
-      await new Promise(resolve => setTimeout(resolve))
-      wrapper.update()
-    })
-    const file = new File([new ArrayBuffer(1)], 'file.jpg')
-    const readAsDataURLSpy = jest.spyOn(FileReader.prototype, 'readAsDataURL')
-    wrapper.find('#folder').simulate('change', { target: { files: [file] } })
-    expect(readAsDataURLSpy).toBeCalledWith(file)
-    expect(wrapper.find('.removeUploaded').first().simulate('click'))
+    wrapper.find('.btn-highlight').first().simulate('click')
+    expect(window.open).toBeCalledTimes(1)
+    expect(global.open).toHaveBeenCalledWith(`${__SAU_LINK__}?version=0.0.0`)
   })
 })
diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index 9dabd1b1452261515e24d29250d5a88bf330415f..a7355a00f266e200feb2ffe40c4271727ff8c04f 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -1,33 +1,18 @@
-import React, { ChangeEvent, useState } from 'react'
+import React from 'react'
+import { Client, useClient } from 'cozy-client'
 import { IuseI18n, useI18n } from 'cozy-ui/transpiled/react/I18n'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import { Client, useClient } from 'cozy-client'
-import { detect } from 'detect-browser'
-
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import IconButton from '@material-ui/core/IconButton'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
-import StyledIconBorderedButton from 'components/CommonKit/IconButton/StyledIconBorderedButton'
-import BugOnIcon from 'assets/icons/visu/feedback/bug-on.svg'
-import BugOffIcon from 'assets/icons/visu/feedback/bug-off.svg'
-import IdeaOnIcon from 'assets/icons/visu/feedback/idea-on.svg'
-import IdeaOffIcon from 'assets/icons/visu/feedback/idea-off.svg'
-import OtherOnIcon from 'assets/icons/visu/feedback/other-on.svg'
-import OtherOffIcon from 'assets/icons/visu/feedback/other-off.svg'
-import WarningIcon from 'assets/icons/ico/warning-yellow.svg'
 import CloseIcon from 'assets/icons/ico/close.svg'
-import SuccessIcon from 'assets/icons/visu/data-ok.svg'
-import MailService from 'services/mail.service'
+import EcolyoIcon from 'assets/icons/ico/ecolyo.svg'
 import './feedbackModal.scss'
 import useExploration from 'components/Hooks/useExploration'
 import { UserExplorationID } from 'enum/userExploration.enum'
-import EnvironmentService from 'services/environment.service'
-import Link from '@material-ui/core/Link'
-import { Link as RouterLink } from 'react-router-dom'
 
-const FEEDBACK_EMAIL = 'ecolyo@grandlyon.com'
-const browser = detect()
+declare let __SAU_LINK__: string
 
 interface FeedbackModalProps {
   open: boolean
@@ -40,162 +25,15 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
 }: FeedbackModalProps) => {
   const { t }: IuseI18n = useI18n()
   const client: Client = useClient()
-  const [type, setType] = useState<string>('bug')
-  const [description, setDescription] = useState<string>('')
-  const [sending, setSending] = useState<boolean>(false)
-  const [sent, setSent] = useState<boolean>(false)
-  const [error, setError] = useState<string>('')
-  const [textFile, setTextFile] = useState<string>()
-  const [uploadedFile, setuploadedFile] = useState<File | null>(null)
-
   const [, setValidExploration] = useExploration()
-  const resetInputs = () => {
-    setType('bug')
-    setDescription('')
-    setSent(false)
-    setError('')
-  }
 
   const closeModal = () => {
-    resetInputs()
     handleCloseClick()
   }
 
-  const sendEmail = async () => {
-    setSending(true)
-    if (description === '') {
-      setError(t('feedback.error_empty_description'))
-    } else {
-      setValidExploration(UserExplorationID.EXPLORATION005)
-      const envInfo =
-        `Ecolyo` +
-        `\nv${client.appMetadata.version}` +
-        `\n\nLocation: ${window.location}` +
-        '\n\nBrowser:' +
-        `\nOn ${browser && browser.os}` +
-        `\nFrom ${browser && browser.name}` +
-        `\n${browser && browser.version}` +
-        '\n\nNavigator:' +
-        `\nOn ${navigator.platform}` +
-        `\nFrom ${navigator.vendor}` +
-        `\n${navigator.userAgent}`
-
-      const mailContent =
-        'Type: ' +
-        t('feedback.type_' + type) +
-        '\n\nDescription:\n' +
-        description +
-        '\n' +
-        envInfo
-
-      const subjectEnv = new EnvironmentService().isProduction()
-        ? '[Ecolyo]'
-        : '[Ecolyo - alpha]'
-
-      const mailData = {
-        mode: 'from',
-        to: [{ name: 'Support', email: FEEDBACK_EMAIL }],
-        subject: subjectEnv + ' - Feedbacks - ' + t('feedback.type_' + type),
-        parts: [{ type: 'text/plain', body: mailContent }],
-        attachments:
-          uploadedFile && textFile
-            ? [{ filename: uploadedFile.name, content: textFile }]
-            : [],
-      }
-      try {
-        const mailService = new MailService()
-        mailService.SendMail(client, mailData)
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error(e)
-        setError(t('feedback.error_sending'))
-      }
-    }
-    setSending(false)
-    setSent(true)
-    setuploadedFile(null)
-  }
-
-  const validResult = () => {
-    setSent(false)
-    setError('')
-    if (error === '') {
-      resetInputs()
-      closeModal()
-    }
-  }
-
-  const getOnIcon = (_type: string) => {
-    switch (_type) {
-      case 'bug':
-        return BugOnIcon
-      case 'idea':
-        return IdeaOnIcon
-      case 'other':
-        return OtherOnIcon
-      default:
-        return BugOnIcon
-    }
-  }
-  const getOffIcon = (_type: string) => {
-    switch (_type) {
-      case 'bug':
-        return BugOffIcon
-      case 'idea':
-        return IdeaOffIcon
-      case 'other':
-        return OtherOffIcon
-      default:
-        return BugOffIcon
-    }
-  }
-
-  const selectorItem = (itemType: string) => {
-    const selected = type === itemType
-    return (
-      <div className="fb-selector-item">
-        <StyledIconBorderedButton
-          aria-label={t('feedback.accessibility.select_type_' + itemType)}
-          icon={selected ? getOnIcon(itemType) : getOffIcon(itemType)}
-          selected={selected}
-          autoFocus={selected}
-          size={36}
-          onClick={() => setType(itemType)}
-        >
-          <div
-            className={
-              selected
-                ? 'fb-selector-item-selectedlabel text-10-bold'
-                : 'fb-selector-item-label text-10-normal'
-            }
-          >
-            {t('feedback.type_' + itemType)}
-          </div>
-        </StyledIconBorderedButton>
-      </div>
-    )
-  }
-  const readFileAsDataURL = async (file: File): Promise<string> => {
-    return new Promise(resolve => {
-      const reader = new FileReader()
-      reader.onloadend = () => {
-        if (reader.result) {
-          resolve(reader.result as string)
-        }
-      }
-      reader.readAsDataURL(file)
-    })
-  }
-  const getDocument = async (
-    e: ChangeEvent<HTMLInputElement>
-  ): Promise<void> => {
-    const { files } = e.target
-    const file = files ? files[0] : null
-    if (file) {
-      setuploadedFile(file)
-      const base64File: string = await readFileAsDataURL(file)
-      setTextFile(base64File.split(',')[1])
-    }
+  const goToSAU = () => {
+    setValidExploration(UserExplorationID.EXPLORATION005)
+    window.open(`${__SAU_LINK__}?version=${client.appMetadata.version}`)
   }
 
   return (
@@ -222,127 +60,31 @@ const FeedbackModal: React.FC<FeedbackModalProps> = ({
         <Icon icon={CloseIcon} size={16} />
       </IconButton>
       <div className="fb-root">
-        {sent ? (
-          <>
-            <div className="fb-content">
-              {error === '' ? (
-                <div className="fb-content-success">
-                  <div className="fb-icon">
-                    <StyledIcon icon={SuccessIcon} size={48} />
-                  </div>
-                  <div>{t('feedback.success_sending')}</div>
-                </div>
-              ) : (
-                <div className="fb-content-error">
-                  <div className="fb-icon">
-                    <StyledIcon icon={WarningIcon} size={48} />
-                  </div>
-                  <div>{t('feedback.warning')}</div>
-                  <div>{error}</div>
-                </div>
-              )}
-              <Button
-                aria-label={t('feedback.accessibility.button_ok')}
-                onClick={validResult}
-                variant={'contained'}
-                classes={{
-                  root: 'btn-highlight',
-                  label: 'text-16-bold',
-                }}
-              >
-                {t('feedback.ok')}
-              </Button>
-            </div>
-          </>
-        ) : (
-          <>
-            <div id="title" className="fb-header text-18-bold">
-              {t('feedback.title')}
-            </div>
-            <form className="fb-content">
-              <label htmlFor="feedbackType" className="fb-label text-16-bold">
-                {t('feedback.type')}
-              </label>
-              <fieldset id="feedbackType" className="fb-selector">
-                {selectorItem('bug')}
-                {selectorItem('idea')}
-                {selectorItem('other')}
-              </fieldset>
-
-              <span id="suggestFaq" className="fb-label text-16-bold">
-                {t('feedback.suggest_faq')}
-                <Link
-                  component={RouterLink}
-                  to="options/FAQ"
-                  onClick={closeModal}
-                >
-                  <span className="styledLink">FAQ</span>
-                </Link>
-                &nbsp;?
-              </span>
-              <label
-                htmlFor="idFeedbackDescription"
-                className="fb-label text-16-bold"
-              >
-                {t('feedback.description')}
-              </label>
-              <textarea
-                id="idFeedbackDescription"
-                className="fb-form fb-textarea"
-                placeholder={t('feedback.description_placeholder')}
-                name="description"
-                onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-                  setDescription(e.target.value)
-                }
-                value={description}
-              ></textarea>
-              <div className="validate_row">
-                {!uploadedFile ? (
-                  <>
-                    <input
-                      type="file"
-                      id="folder"
-                      accept="image/*"
-                      onChange={(e): Promise<void> => getDocument(e)}
-                      className="input-file"
-                      hidden
-                    />
-                    <label htmlFor="folder" className="upload-label">
-                      {t('feedback.upload')}
-                    </label>
-                  </>
-                ) : (
-                  <>
-                    <span className="fb-label text-16-bold">
-                      {t('feedback.imageLabel')}
-                    </span>
-                    <div className="fileName">
-                      <span>{uploadedFile.name.substring(0, 3)}..</span>
-                      <IconButton
-                        onClick={() => setuploadedFile(null)}
-                        className="removeUploaded"
-                      >
-                        <Icon icon={CloseIcon} size={12} />
-                      </IconButton>
-                    </div>
-                  </>
-                )}
-                <Button
-                  aria-label={t('feedback.accessibility.button_send')}
-                  onClick={sendEmail}
-                  disabled={sending}
-                  classes={{
-                    root: 'btn-highlight',
-                    label: 'text-16-bold',
-                  }}
-                  type="submit"
-                >
-                  {t('feedback.send')}
-                </Button>
-              </div>
-            </form>
-          </>
-        )}
+        <StyledIcon icon={EcolyoIcon} size={80} />
+        <p className="title">{t('feedback.title')}</p>
+        <p className="subtitle">{t('feedback.subtitle')}</p>
+        <div className="actions">
+          <Button
+            aria-label={t('feedback.later')}
+            onClick={closeModal}
+            classes={{
+              root: 'btn-secondary-positive',
+              label: 'text-16-bold',
+            }}
+          >
+            {t('feedback.later')}
+          </Button>
+          <Button
+            aria-label={t('feedback.lets_go')}
+            onClick={goToSAU}
+            classes={{
+              root: 'btn-highlight',
+              label: 'text-16-bold',
+            }}
+          >
+            {t('feedback.lets_go')}
+          </Button>
+        </div>
       </div>
     </Dialog>
   )
diff --git a/src/components/Feedback/feedbackModal.scss b/src/components/Feedback/feedbackModal.scss
index e8af88519790520306425b2dfbfebd09bd09e174..dae85d4cae5c98e9f93cafc959ca539c7ff76ba2 100644
--- a/src/components/Feedback/feedbackModal.scss
+++ b/src/components/Feedback/feedbackModal.scss
@@ -1,133 +1,35 @@
 @import 'src/styles/base/color';
-@import '../../styles/base/mixins';
 
 .fb-root {
   overflow-y: auto;
   min-width: 70%;
-  margin: 1rem 0;
-  .fb-header {
-    color: $gold-shadow;
-    padding: 0.5rem 0.5rem 0rem 0.5rem;
-    display: flex;
-    justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  p {
+    text-align: center;
   }
 
-  .fb-content {
-    padding: 1rem 0.5rem 1.5rem 0.5rem;
-    display: flex;
-    flex-direction: column;
-    .fb-content-success {
-      color: $grey-bright;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-    }
-    .fb-content-error {
-      color: $grey-bright;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-    }
-    .fb-icon {
-      display: flex;
-      justify-content: center;
-      margin: 0 0 1.5rem 0;
-    }
-    .fb-label {
-      margin: 0.5rem 0 0 0;
-    }
-    .fb-selector {
-      margin: 0.5rem 0;
-      display: flex;
-      flex-direction: row;
-      align-content: space-around;
-      justify-content: space-around;
-      padding: 0;
-      border: none;
-      .fb-selector-item {
-        height: 3.125rem;
-        width: 3.125rem;
-        .fb-selector-item-label {
-          color: $grey-bright;
-        }
-        .fb-selector-item-selectedlabel {
-          color: $white;
-        }
-      }
-    }
-    .fb-form {
-      margin: 0.5rem 0;
-      border: 1px solid $grey-dark;
-      border-radius: 4px;
-      color: $grey-bright;
-      background: rgba(0, 0, 0, 0.3);
-      padding: 0 1rem;
-      outline: none;
-    }
-    .fb-form:focus {
-      border: 1px solid $gold-shadow;
-    }
-    .fb-textarea {
-      height: 8.725rem;
-      padding: 0.5rem 1rem;
-      resize: none;
-    }
-    .fb-input {
-      height: 2rem;
-    }
-    button.btn-highlight {
-      max-width: 9.375rem;
-      align-self: center;
-      width: 38%;
-      padding-top: 0.5rem;
-      padding-bottom: 0.6rem;
-      margin: 0 !important;
-    }
+  .title {
+    color: $gold-light;
+    font-weight: 700;
+    padding: 0.5rem;
   }
-}
-.upload-label {
-  appearance: none;
-  padding: 0.5rem;
-  text-align: center;
-  max-width: 180px;
-  width: 50% !important;
-  @include button(
-    transparent,
-    rgba($grey-bright, 0.7),
-    1px solid $grey-dark,
-    transparent
-  );
-  background-color: rgba($grey-dark, 0.2);
-  margin: 0.8rem auto;
-  transition: all 300ms ease;
-  &:hover {
-    opacity: 0.7;
+
+  .subtitle {
+    color: $grey-bright;
+    margin: 1rem 0 2rem;
   }
-}
 
-.styledLink {
-  color: $gold-light;
-  text-decoration: underline;
-}
-.fileName {
-  display: flex;
-  justify-content: space-between;
-  padding: 0 0.5rem;
-  color: $grey-bright;
-  border: solid 1px $grey-dark;
-  border-radius: 3px;
-  margin: 0.5rem 0;
-  align-items: center;
-}
-.validate_row {
-  display: flex;
-  justify-content: space-evenly;
-}
-#accessibility-title {
-  display: none;
-}
-#suggestFaq {
-  margin-bottom: 1rem;
+  .actions {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    button {
+      margin-top: 0;
+      max-width: 150px;
+    }
+  }
 }
diff --git a/src/components/Header/CozyBar.tsx b/src/components/Header/CozyBar.tsx
index 81c19f8d3acf5de5b5b9b40a84b4baa01848195e..33b4c8d7449ba701836f955187b1e62bf12d8a02 100644
--- a/src/components/Header/CozyBar.tsx
+++ b/src/components/Header/CozyBar.tsx
@@ -1,14 +1,13 @@
-import React, { useCallback } from 'react'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useSelector, useDispatch } from 'react-redux'
-import { AppStore } from 'store'
-import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
-import { useHistory } from 'react-router-dom'
-
-import { ScreenType } from 'enum/screen.enum'
 import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
 import FeedbackIcon from 'assets/icons/ico/feedback.svg'
 import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import { ScreenType } from 'enum/screen.enum'
+import React, { useCallback } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useHistory } from 'react-router-dom'
+import { AppStore } from 'store'
+import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
 
 interface CozyBarProps {
   titleKey?: string
@@ -67,7 +66,7 @@ const CozyBar = ({
               aria-label={t('header.accessibility.button_open_feedbacks')}
               className="cv-button"
               icon={FeedbackIcon}
-              sized={40}
+              sized={22}
               onClick={handleClickFeedbacks}
             />
           </BarRight>
diff --git a/src/components/Options/HelpLink.scss b/src/components/Options/HelpLink/HelpLink.scss
similarity index 100%
rename from src/components/Options/HelpLink.scss
rename to src/components/Options/HelpLink/HelpLink.scss
diff --git a/src/components/Options/HelpLink.tsx b/src/components/Options/HelpLink/HelpLink.tsx
similarity index 78%
rename from src/components/Options/HelpLink.tsx
rename to src/components/Options/HelpLink/HelpLink.tsx
index f0f9d36c3ab9437d32dc502e90af6e87701d2dde..7311138ae02517f63607ce95f2d93294bb061765 100644
--- a/src/components/Options/HelpLink.tsx
+++ b/src/components/Options/HelpLink/HelpLink.tsx
@@ -1,14 +1,21 @@
-import React from 'react'
-import './HelpLink.scss'
 import Link from '@material-ui/core/Link'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import QuestionMarkIcon from 'assets/icons/ico/questionMark.svg'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
+import './HelpLink.scss'
 
 const HelpLink: React.FC = () => {
   const { t } = useI18n()
+  const dispatch = useDispatch()
+
   return (
-    <div className="help-root">
+    <div
+      className="help-root"
+      onClick={() => dispatch(updateModalIsFeedbacksOpen(true))}
+    >
       <div className="help-content">
         <div className="help-header text-16-normal-uppercase">
           {t('help.title_help')}
diff --git a/src/components/Options/MatomoOptOut.spec.tsx b/src/components/Options/MatomoOptOut/MatomoOptOut.spec.tsx
similarity index 90%
rename from src/components/Options/MatomoOptOut.spec.tsx
rename to src/components/Options/MatomoOptOut/MatomoOptOut.spec.tsx
index 11ca220012806d180ab8d95272e65ad1679325d2..69296c020177a909d8e354410040bccab0cd60d9 100644
--- a/src/components/Options/MatomoOptOut.spec.tsx
+++ b/src/components/Options/MatomoOptOut/MatomoOptOut.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { shallow } from 'enzyme'
-import { MatomoOptOut } from './MatomoOptOut'
+import MatomoOptOut from './MatomoOptOut'
 
 jest.mock('cozy-ui/transpiled/react/I18n', () => {
   return {
diff --git a/src/components/Options/MatomoOptOut.tsx b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
similarity index 91%
rename from src/components/Options/MatomoOptOut.tsx
rename to src/components/Options/MatomoOptOut/MatomoOptOut.tsx
index 69e16ae49cc8eca9e7897a869c213e541d36ac5a..c638d3edaaf568b11361e9e1fbd4e82c7cdbe957 100644
--- a/src/components/Options/MatomoOptOut.tsx
+++ b/src/components/Options/MatomoOptOut/MatomoOptOut.tsx
@@ -4,7 +4,7 @@ import './matomoOptOut.scss'
 
 declare let __PIWIK_TRACKER_URL__: string
 
-export const MatomoOptOut: React.FC = () => {
+const MatomoOptOut: React.FC = () => {
   const { t } = useI18n()
   const baseUrl = __PIWIK_TRACKER_URL__
 
@@ -22,3 +22,5 @@ export const MatomoOptOut: React.FC = () => {
     </div>
   )
 }
+
+export default MatomoOptOut
diff --git a/src/components/Options/__snapshots__/MatomoOptOut.spec.tsx.snap b/src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
similarity index 100%
rename from src/components/Options/__snapshots__/MatomoOptOut.spec.tsx.snap
rename to src/components/Options/MatomoOptOut/__snapshots__/MatomoOptOut.spec.tsx.snap
diff --git a/src/components/Options/matomoOptOut.scss b/src/components/Options/MatomoOptOut/matomoOptOut.scss
similarity index 100%
rename from src/components/Options/matomoOptOut.scss
rename to src/components/Options/MatomoOptOut/matomoOptOut.scss
diff --git a/src/components/Options/OptionsView.tsx b/src/components/Options/OptionsView.tsx
index 086a22ccffc9d100cf7cbf8f7e4bec11a22a013a..b6e54afdcf9ff42cb7f24cc82f1916b7f64ee5cf 100644
--- a/src/components/Options/OptionsView.tsx
+++ b/src/components/Options/OptionsView.tsx
@@ -1,17 +1,16 @@
 import logos from 'assets/png/logos.png'
 import Content from 'components/Content/Content'
-import FAQLink from 'components/FAQ/FAQLink'
 import GCULink from 'components/GCU/GCULink'
 import CozyBar from 'components/Header/CozyBar'
 import Header from 'components/Header/Header'
 import LegalNoticeLink from 'components/LegalNotice/LegalNoticeLink'
 import ExportOptions from 'components/Options/exportOptions'
-import ReportOptions from 'components/Options/ReportOptions'
 import Version from 'components/Version/Version'
 import React, { useState } from 'react'
-// import HelpLink from './HelpLink'
-import { MatomoOptOut } from './MatomoOptOut'
-import ProfileTypeOptions from './ProfileTypeOptions'
+import HelpLink from './HelpLink/HelpLink'
+import MatomoOptOut from './MatomoOptOut/MatomoOptOut'
+import ProfileTypeOptions from './ProfileTypeOptions/ProfileTypeOptions'
+import ReportOptions from './ReportOptions/ReportOptions'
 
 const OptionsView: React.FC = () => {
   const [headerHeight, setHeaderHeight] = useState<number>(0)
@@ -29,9 +28,7 @@ const OptionsView: React.FC = () => {
         <ProfileTypeOptions />
         <ExportOptions />
         <ReportOptions />
-        <FAQLink />
-        {/* Waiting for SAU to be ready to enable button. When it's ready, remove FAQ & CGU */}
-        {/* <HelpLink /> */}
+        <HelpLink />
         <LegalNoticeLink />
         <GCULink />
         <MatomoOptOut />
diff --git a/src/components/Options/ProfileTypeOptions.spec.tsx b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx
similarity index 94%
rename from src/components/Options/ProfileTypeOptions.spec.tsx
rename to src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx
index e9e76356b6fd67b89366fe4504cc1e67421adc9f..fed0a9870aac2c6e2acc96614577d5ce853f52fd 100644
--- a/src/components/Options/ProfileTypeOptions.spec.tsx
+++ b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.spec.tsx
@@ -2,9 +2,9 @@ import React from 'react'
 import { mount } from 'enzyme'
 import { Provider } from 'react-redux'
 import configureStore from 'redux-mock-store'
-import ProfileTypeOptions from 'components/Options/ProfileTypeOptions'
-import { profileData } from '../../../tests/__mocks__/profile.mock'
-import { mockProfileType } from '../../../tests/__mocks__/profileType.mock'
+import ProfileTypeOptions from 'components/Options/ProfileTypeOptions/ProfileTypeOptions'
+import { profileData } from '../../../../tests/__mocks__/profile.mock'
+import { mockProfileType } from '../../../../tests/__mocks__/profileType.mock'
 import StyledCard from 'components/CommonKit/Card/StyledCard'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import profileIcon from 'assets/icons/ico/profile.svg'
@@ -14,7 +14,7 @@ import {
   IndividualOrCollective,
   ThreeChoicesAnswer,
 } from 'enum/profileType.enum'
-import { mockInitialChallengeState } from '../../../tests/__mocks__/store'
+import { mockInitialChallengeState } from '../../../../tests/__mocks__/store'
 
 jest.mock('cozy-ui/transpiled/react/I18n', () => {
   return {
diff --git a/src/components/Options/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
similarity index 100%
rename from src/components/Options/ProfileTypeOptions.tsx
rename to src/components/Options/ProfileTypeOptions/ProfileTypeOptions.tsx
diff --git a/src/components/Options/profileTypeOptions.scss b/src/components/Options/ProfileTypeOptions/profileTypeOptions.scss
similarity index 100%
rename from src/components/Options/profileTypeOptions.scss
rename to src/components/Options/ProfileTypeOptions/profileTypeOptions.scss
diff --git a/src/components/Options/ReportOptions.spec.tsx b/src/components/Options/ReportOptions/ReportOptions.spec.tsx
similarity index 93%
rename from src/components/Options/ReportOptions.spec.tsx
rename to src/components/Options/ReportOptions/ReportOptions.spec.tsx
index f97b6ddad87824400d8cd65bfa56ad4336ba3a78..a31d03958e75df27bf91de38da7acdb762f2f669 100644
--- a/src/components/Options/ReportOptions.spec.tsx
+++ b/src/components/Options/ReportOptions/ReportOptions.spec.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import { mount } from 'enzyme'
 import { Provider } from 'react-redux'
-import ReportOptions from 'components/Options/ReportOptions'
+import ReportOptions from 'components/Options/ReportOptions/ReportOptions'
 import {
   createMockStore,
   mockInitialEcolyoState,
-} from '../../../tests/__mocks__/store'
+} from '../../../../tests/__mocks__/store'
 import * as profileActions from 'store/profile/profile.actions'
 import { Button } from '@material-ui/core'
 import StyledSwitch from 'components/CommonKit/Switch/StyledSwitch'
diff --git a/src/components/Options/ReportOptions.tsx b/src/components/Options/ReportOptions/ReportOptions.tsx
similarity index 100%
rename from src/components/Options/ReportOptions.tsx
rename to src/components/Options/ReportOptions/ReportOptions.tsx
diff --git a/src/components/Options/reportOptions.scss b/src/components/Options/ReportOptions/reportOptions.scss
similarity index 100%
rename from src/components/Options/reportOptions.scss
rename to src/components/Options/ReportOptions/reportOptions.scss
diff --git a/src/components/Options/UnSubscribe.spec.tsx b/src/components/Options/Unsubscribe/UnSubscribe.spec.tsx
similarity index 97%
rename from src/components/Options/UnSubscribe.spec.tsx
rename to src/components/Options/Unsubscribe/UnSubscribe.spec.tsx
index bd7b90d4697e2b2ef304a4aa301fd30d4544b1a1..2bc1f64607d47c166ab5c83d0da0862dd7053acf 100644
--- a/src/components/Options/UnSubscribe.spec.tsx
+++ b/src/components/Options/Unsubscribe/UnSubscribe.spec.tsx
@@ -5,7 +5,7 @@ import { Provider } from 'react-redux'
 import {
   createMockStore,
   mockInitialEcolyoState,
-} from '../../../tests/__mocks__/store'
+} from '../../../../tests/__mocks__/store'
 import * as profileActions from 'store/profile/profile.actions'
 import UnSubscribe from './UnSubscribe'
 import { Button } from '@material-ui/core'
diff --git a/src/components/Options/UnSubscribe.tsx b/src/components/Options/Unsubscribe/UnSubscribe.tsx
similarity index 100%
rename from src/components/Options/UnSubscribe.tsx
rename to src/components/Options/Unsubscribe/UnSubscribe.tsx
diff --git a/src/components/Options/__snapshots__/UnSubscribe.spec.tsx.snap b/src/components/Options/Unsubscribe/__snapshots__/UnSubscribe.spec.tsx.snap
similarity index 100%
rename from src/components/Options/__snapshots__/UnSubscribe.spec.tsx.snap
rename to src/components/Options/Unsubscribe/__snapshots__/UnSubscribe.spec.tsx.snap
diff --git a/src/components/Options/unSubscribe.scss b/src/components/Options/Unsubscribe/unSubscribe.scss
similarity index 100%
rename from src/components/Options/unSubscribe.scss
rename to src/components/Options/Unsubscribe/unSubscribe.scss
diff --git a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
index 8889596f229dbeef4341f3f654f6cb9502b91401..1fcb358c2fd2fdfedf95ab7a6e2f06504c83460f 100644
--- a/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
+++ b/src/components/Options/__snapshots__/OptionsView.spec.tsx.snap
@@ -15,7 +15,7 @@ exports[`OptionsView component should be rendered correctly 1`] = `
     <ProfileTypeOptions />
     <ExportOptions />
     <ReportOptions />
-    <FAQLink />
+    <HelpLink />
     <LegalNoticeLink />
     <GCULink />
     <MatomoOptOut />
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index de8fee76c7dfc1aa21095784ac787a7c6714117a..849967efedf6c84eb54c2adcf6bc48a99e99727d 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -6,7 +6,7 @@ import DuelView from 'components/Duel/DuelView'
 import QuizView from 'components/Quiz/QuizView'
 import ExplorationView from 'components/Exploration/ExplorationView'
 import ActionView from 'components/Action/ActionView'
-import UnSubscribe from 'components/Options/UnSubscribe'
+import UnSubscribe from 'components/Options/Unsubscribe/UnSubscribe'
 import TermsView from 'components/Terms/TermsView'
 import { TermsStatus } from 'models'
 import EcogestureFormView from 'components/EcogestureForm/EcogestureFormView'
@@ -22,7 +22,6 @@ const SingleEcogesture = lazy(
   () => import('components/Ecogesture/SingleEcogesture')
 )
 const OptionsView = lazy(() => import('components/Options/OptionsView'))
-const FAQView = lazy(() => import('components/FAQ/FAQView'))
 const LegalNoticeView = lazy(
   () => import('components/LegalNotice/LegalNoticeView')
 )
@@ -72,7 +71,6 @@ const Routes: React.FC<RouteProps> = ({ termsStatus }: RouteProps) => {
         <Route path="/ecogesture/:id" component={SingleEcogesture} />
         <Route path={`/ecogestures`} component={EcogestureView} />
         <Route path={`/ecogestures`} component={EcogestureView} />
-        <Route path={'/options/FAQ'} component={FAQView} />
         <Route path={`/options/legalnotice`} component={LegalNoticeView} />
         <Route path={`/options/gcu`} component={GCUView} />
         <Route path={'/options/:connectParam'} exact component={OptionsView} />
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 5391b63c57c5a8af9b6fba513344cd014bc0fdde..c8096fac280f8cdf279bed9c5e79f6a0f7afa8c9 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -12,7 +12,6 @@
     "title_options": "Options",
     "title_analysis": "Analyse",
     "title_profiletype": "Ajuster mon profil",
-    "title_faq": "FAQ",
     "title_legal_notice": "Mentions légales",
     "title_gcu": "CGU",
     "title_sge_connect": "Connexion à l'électricité",
@@ -572,41 +571,18 @@
     "back": "Retour",
     "no_ecogesture": "Oups ! Nous n'avons pas trouvé l'astuce demandée."
   },
-  "faq": {
-    "title_faq": "Foire aux questions",
-    "read_faq": "Lire la FAQ",
-    "accessibility": {
-      "button_toggle_detail": "Afficher ou masquer le détail de la question"
-    }
-  },
+
   "help": {
     "title_help": "Besoin d'aide ?",
     "read_help": "Accéder au Service d'Assistance Utilisateur"
   },
   "feedback": {
-    "title": "Partagez-nous vos retours",
-    "type": "Motif du retour :",
-    "suggest_faq": "Avez-vous pensé à consulter la ",
-    "description": "Description :",
-    "description_placeholder": "Vos remarques",
-    "send": "Envoyer",
-    "ok": "Ok",
-    "type_bug": "Bug",
-    "type_idea": "Idée",
-    "type_other": "Autre",
-    "success_sending": "Nous vous remercions pour votre retour.",
-    "warning": "Attention !",
-    "error_empty_description": "Le champ de description est vide.",
-    "error_sending": "Erreur lors de l'envoi, veuillez essayer ultérieurement.",
-    "upload": "Joindre une image",
-    "imageLabel": "Image :",
+    "title": "Vous allez contacter le Service Assistance Utilisateur du Grand Lyon.",
+    "subtitle": "Pas de panique, c'est bien l'équipe Ecolyo qui traitera votre demande !",
+    "later": "Plus tard",
+    "lets_go": "J'y vais",
     "accessibility": {
       "window_title": "Fenêtre de partage de retours",
-      "select_type_bug": "Sélectionner le motif bug",
-      "select_type_idea": "Sélectionner le motif idée",
-      "select_type_other": "Sélectionner le motif autre",
-      "button_send": "Envoyer le retour",
-      "button_ok": "Valider",
       "button_close": "Fermer la fenêtre de partage de retours"
     }
   },
@@ -683,7 +659,7 @@
       "part6_3_list3": "De l’évolution de vos consommations, des nouveautés et  de la qualité du service via une lettre mensuelle. Vous pouvez à tout moment vous désinscrire de cette lettre via la page Options du service.",
       "part6_4": "Par ailleurs, et dans le cadre de l’évaluation et de l’amélioration du service, des données d’utilisation anonymisées seront remontées à des fins d’exploitation statistiques. La récupération de ces statistiques anonymisées nous permettra de s’assurer du bon fonctionnement technique de la connexion à vos données de consommation ainsi que d’évaluer l’impact global en termes de baisse des consommations énergétiques de notre service. Parmi ces statistiques, des mesures d’audience de la fréquentation des différentes pages du service sont réalisées. Vous pouvez, via la page Options, à tout instant, décider de vous opposer à la récupération de ces données d’utilisation.",
       "title8": "Encore des questions ?",
-      "part8_1": "N’hésitez pas à consulter la FAQ présente dans le service (page Options) ou à nous contacter via le formulaire de contact (la petite bulle jaune) présente sur l’ensemble des pages.",
+      "part8_1": "N’hésitez pas à nous contacter via le formulaire de contact (la petite bulle) présente sur l’ensemble des pages.",
       "part8_2": "Dernière option, contactez-nous directement à <a href=\"mailto:ecolyo@grandlyon.com\">ecolyo(at)grandlyon.com</a>.",
       "title9": "LEXIQUE",
       "part9_1_title": "Cloud personnel Grand Lyon : ",
diff --git a/src/models/faq.model.ts b/src/models/faq.model.ts
deleted file mode 100644
index f44da78b3fc8e8f5941080ba65dea384f26a5627..0000000000000000000000000000000000000000
--- a/src/models/faq.model.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface FAQQuestion {
-  summary: string
-  details: JSX.Element
-}
-
-export interface FAQSection {
-  section: string
-  questions: FAQQuestion[]
-}
diff --git a/src/models/index.ts b/src/models/index.ts
index 6fb7176aa260ffb85c8201544f0579f93dfb293a..67e0a9bf870ff2a3507c12e0256a540be1ea88d0 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -9,7 +9,6 @@ export * from './dataload.model'
 export * from './duel.model'
 export * from './ecogesture.model'
 export * from './exploration.model'
-export * from './faq.model'
 export * from './fluid.model'
 export * from './fluidPrice.model'
 export * from './global.model'
diff --git a/tests/__mocks__/faq.mock.tsx b/tests/__mocks__/faq.mock.tsx
deleted file mode 100644
index 145c90a29efd7d12b2524d96a051d9f6552572dc..0000000000000000000000000000000000000000
--- a/tests/__mocks__/faq.mock.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/* eslint-disable react/no-unescaped-entities */
-import { FAQSection } from 'models'
-import React from 'react'
-
-export const faqData: FAQSection[] = [
-  {
-    section: 'Mes données',
-    questions: [
-      {
-        summary: 'Comment accéder à mes données électricité ?',
-        details: (
-          <div>
-            Rendez-vous dans la partie Options du service et cliquer sur le
-            bouton "Se connecter à l\'électricité". Suivez la procédure (en vous
-            créant un compte Enedis si nécessaire). Une fois votre consentement
-            donné, vos données de consommation seront récupérées.
-          </div>
-        ),
-      },
-      {
-        summary: 'Comment accéder à mes données gaz ?',
-        details: (
-          <div>
-            Rendez-vous dans la partie Options du service et cliquez sur le
-            bouton "Se connecter au gaz". Suivez la procédure (en vous créant un
-            compte GRDF si nécessaire). Une fois votre consentement donné, vos
-            données de consommation seront récupérées.',
-          </div>
-        ),
-      },
-    ],
-  },
-  {
-    section: 'Contenu du service',
-    questions: [
-      {
-        summary:
-          'Pourquoi les prix affichés sont-ils différents de ceux indiqués sur ma facture ?',
-        details: (
-          <div>
-            <p>
-              Le prix de votre électricité ou de votre gaz dépend de l'offre
-              choisie auprès de votre fournisseur. N’ayant pas accès à cette
-              information, Ecolyo affiche un prix moyen par fluide.
-            </p>
-            <p>Tarifs moyens retenus :</p>
-          </div>
-        ),
-      },
-    ],
-  },
-]