diff --git a/src/components/GCU/GCUContent.spec.tsx b/src/components/GCU/GCUContent.spec.tsx
index 9662e7bc7410f29303c2f6d5530db2903800f72f..70d90112c326f5312d29f9162f591a0466f1e81c 100644
--- a/src/components/GCU/GCUContent.spec.tsx
+++ b/src/components/GCU/GCUContent.spec.tsx
@@ -6,7 +6,13 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
useI18n: jest.fn(() => {
return {
- t: (str: string) => str,
+ t: (str: string) => {
+ if (str === 'gcu.content.part9_4_content') {
+ return "test <a href=\"link.com\">link</a>fin test"
+ } else {
+ return str
+ }
+ },
}
}),
}
@@ -17,4 +23,8 @@ describe('GCUContent component', () => {
const component = shallow(<GCUContent />).getElement()
expect(component).toMatchSnapshot()
})
+ it('should display a link when translation contains <a href=""></a>', () => {
+ const component = shallow(<GCUContent />).getElement()
+ expect(component).toMatchSnapshot()
+ })
})
diff --git a/src/components/GCU/GCUContent.tsx b/src/components/GCU/GCUContent.tsx
index 172c6a78b88f30e6238a1dd98745173e51d30060..78d31c2c84ae7988e18bcab6ca1add3f0ab34986 100644
--- a/src/components/GCU/GCUContent.tsx
+++ b/src/components/GCU/GCUContent.tsx
@@ -10,31 +10,125 @@ const GCUContent: React.FC<GCUContentProps> = ({
fromOption = false,
}: GCUContentProps) => {
const { t } = useI18n()
+ const decoreText = (line: string) => {
+ if (line.includes('<a href="')) {
+ const indexRefStart = line.indexOf('<a href="')
+ const indexRefEnd = line.indexOf('">')
+ const indexEnd = line.indexOf('</a>')
+ return (
+ <>
+ {line.substring(0, indexRefStart)}
+ <a
+ href={line.substring(indexRefStart + 9, indexRefEnd)}
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ {line.substring(indexRefEnd + 2, indexEnd)}
+ </a>
+ {line.substring(indexEnd + 4, line.length)}
+ </>
+ )
+ } else {
+ return line
+ }
+ }
return (
<div className="gcu-content-root">
<div className="gcu-content-wrapper">
- <h1 className="text-22-normal">{t('gcu.title')}</h1>
- {!fromOption && <h2 className="text-16-normal">{t('gcu.subtitle')}</h2>}
- <div className="gcu-content-title">{t('gcu.content.title')}</div>
- <div>{t('gcu.content.intro')}</div>
- <div className="gcu-content-title">{t('gcu.content.subtitle1')}</div>
- <div>{t('gcu.content.content1')}</div>
- <div className="gcu-content-title">{t('gcu.content.subtitle2')}</div>
- <div>{t('gcu.content.content2')}</div>
- <div className="gcu-content-title">{t('gcu.content.subtitle3')}</div>
- <div>{t('gcu.content.content3')}</div>
- <div className="gcu-content-title">{t('gcu.content.subtitle4')}</div>
- <div>{t('gcu.content.content4')}</div>
- <div className="gcu-content-title">{t('gcu.content.subtitle5')}</div>
- <div>{t('gcu.content.content5')}</div>
- <div className="gcu-content-title">{t('gcu.content.subtitle6')}</div>
- <div>{t('gcu.content.content6')}</div>
- <div className="gcu-content-title">{t('gcu.content.subtitle7')}</div>
- <div>{t('gcu.content.content7_1')}</div>
- <div>{t('gcu.content.content7_2')}</div>
- <div>{t('gcu.content.content7_3')}</div>
- <div>{t('gcu.content.content7_4')}</div>
- <div>{t('gcu.content.content7_5')}</div>
+ <h1 className="gcu-content-title text-22-normal">{t('gcu.title')}</h1>
+ {!fromOption && (
+ <h2 className="gcu-content-subtitle text-16-italic">
+ {t('gcu.subtitle')}
+ </h2>
+ )}
+ <div className="gcu-content-part-title text-15-normal">
+ {t('gcu.content.title1')}
+ </div>
+ <p className="text-14-normal">{t('gcu.content.part1_1')}</p>
+ <p className="text-14-normal">{t('gcu.content.part1_2')}</p>
+ <p className="text-14-italic">{t('gcu.content.part1_3')}</p>
+ <div className="gcu-content-part-title text-15-normal">
+ {t('gcu.content.title2')}
+ </div>
+ <p className="text-14-normal">{t('gcu.content.part2_1')}</p>
+ <p className="text-14-normal">{t('gcu.content.part2_2')}</p>
+ <ul className="text-14-normal">
+ <li>{t('gcu.content.part2_2_list1')}</li>
+ <li>{t('gcu.content.part2_2_list2')}</li>
+ <li>{t('gcu.content.part2_2_list3')}</li>
+ </ul>
+ <p className="text-14-normal">{t('gcu.content.part2_3')}</p>
+ <p className="text-14-normal">{t('gcu.content.part2_4')}</p>
+ <div className="gcu-content-part-title text-15-normal">
+ {t('gcu.content.title3')}
+ </div>
+ <p className="text-14-normal">{t('gcu.content.part3_1')}</p>
+ <p className="text-14-normal">{t('gcu.content.part3_2')}</p>
+ <p className="text-14-italic">{t('gcu.content.part3_3')}</p>
+ <p className="text-14-italic">{t('gcu.content.part3_4')}</p>
+ <div className="gcu-content-part-title text-15-normal">
+ {t('gcu.content.title4')}
+ </div>
+ <p className="text-14-normal">{t('gcu.content.part4_1')}</p>
+ <p className="text-14-normal">{t('gcu.content.part4_2')}</p>
+ <div className="gcu-content-part-title text-15-normal">
+ {t('gcu.content.title5')}
+ </div>
+ <p className="text-14-normal">{t('gcu.content.part5_1')}</p>
+ <p className="text-14-normal">{t('gcu.content.part5_2')}</p>
+ <p className="text-14-normal">{t('gcu.content.part5_3')}</p>
+ <ul className="text-14-normal">
+ <li>{t('gcu.content.part5_3_list1')}</li>
+ <li>{decoreText(t('gcu.content.part5_3_list2'))}</li>
+ <li>{t('gcu.content.part5_3_list3')}</li>
+ </ul>
+ <p className="text-14-normal">{t('gcu.content.part5_4')}</p>
+ <p className="text-14-normal">{t('gcu.content.part5_5')}</p>
+ <div className="gcu-content-part-title text-15-normal">
+ {t('gcu.content.title6')}
+ </div>
+ <p className="text-14-normal">{t('gcu.content.part6_1')}</p>
+ <p className="text-14-normal">{t('gcu.content.part5_2')}</p>
+ <p className="text-14-normal">{t('gcu.content.part6_3')}</p>
+ <ul className="text-14-normal">
+ <li>{t('gcu.content.part6_3_list1')}</li>
+ <li>{t('gcu.content.part6_3_list2')}</li>
+ <li>{t('gcu.content.part6_3_list3')}</li>
+ </ul>
+ <p className="text-14-normal">{t('gcu.content.part6_4')}</p>
+ <p className="text-14-normal">{t('gcu.content.part6_5')}</p>
+ <div className="gcu-content-part-title text-15-normal">
+ {t('gcu.content.title7')}
+ </div>
+ <p className="text-14-normal">{t('gcu.content.part7_1')}</p>
+ <div className="gcu-content-part-title text-15-normal">
+ {t('gcu.content.title8')}
+ </div>
+ <p className="text-14-normal">{t('gcu.content.part8_1')}</p>
+ <p className="text-14-normal">{t('gcu.content.part8_2')}</p>
+ <div className="gcu-content-part-title text-15-normal">
+ {t('gcu.content.title9')}
+ </div>
+ <p className="text-14-normal">
+ <span className="text-14-bold">{t('gcu.content.part9_1_title')}</span>
+ <span>{t('gcu.content.part9_1_content')}</span>
+ </p>
+ <p className="text-14-normal">
+ <span className="text-14-bold">{t('gcu.content.part9_2_title')}</span>
+ <span>{t('gcu.content.part9_2_content')}</span>
+ </p>
+ <p className="text-14-normal">
+ <span className="text-14-bold">{t('gcu.content.part9_3_title')}</span>
+ <span>{t('gcu.content.part9_3_content')}</span>
+ </p>
+ <p className="text-14-normal">
+ <span className="text-14-bold">{t('gcu.content.part9_4_title')}</span>
+ <span>{decoreText(t('gcu.content.part9_4_content'))}</span>
+ </p>
+ <p className="text-14-normal">
+ <span className="text-14-bold">{t('gcu.content.part9_5_title')}</span>
+ <span>{t('gcu.content.part9_5_content')}</span>
+ </p>
</div>
</div>
)
diff --git a/src/components/GCU/__snapshots__/GCUContent.spec.tsx.snap b/src/components/GCU/__snapshots__/GCUContent.spec.tsx.snap
index 0329a997882e646d7c6d7728acba22944ae8bd25..7b96d7e6fd24d9e7d5b8e69a6f4c09f6bda1cdac 100644
--- a/src/components/GCU/__snapshots__/GCUContent.spec.tsx.snap
+++ b/src/components/GCU/__snapshots__/GCUContent.spec.tsx.snap
@@ -8,91 +8,604 @@ exports[`GCUContent component should be rendered correctly 1`] = `
className="gcu-content-wrapper"
>
<h1
- className="text-22-normal"
+ className="gcu-content-title text-22-normal"
>
gcu.title
</h1>
<h2
- className="text-16-normal"
+ className="gcu-content-subtitle text-16-italic"
>
gcu.subtitle
</h2>
<div
- className="gcu-content-title"
+ className="gcu-content-part-title text-15-normal"
>
- gcu.content.title
- </div>
- <div>
- gcu.content.intro
+ gcu.content.title1
</div>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part1_1
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part1_2
+ </p>
+ <p
+ className="text-14-italic"
+ >
+ gcu.content.part1_3
+ </p>
<div
- className="gcu-content-title"
+ className="gcu-content-part-title text-15-normal"
>
- gcu.content.subtitle1
- </div>
- <div>
- gcu.content.content1
+ gcu.content.title2
</div>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part2_1
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part2_2
+ </p>
+ <ul
+ className="text-14-normal"
+ >
+ <li>
+ gcu.content.part2_2_list1
+ </li>
+ <li>
+ gcu.content.part2_2_list2
+ </li>
+ <li>
+ gcu.content.part2_2_list3
+ </li>
+ </ul>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part2_3
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part2_4
+ </p>
<div
- className="gcu-content-title"
+ className="gcu-content-part-title text-15-normal"
>
- gcu.content.subtitle2
+ gcu.content.title3
</div>
- <div>
- gcu.content.content2
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part3_1
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part3_2
+ </p>
+ <p
+ className="text-14-italic"
+ >
+ gcu.content.part3_3
+ </p>
+ <p
+ className="text-14-italic"
+ >
+ gcu.content.part3_4
+ </p>
+ <div
+ className="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title4
</div>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part4_1
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part4_2
+ </p>
<div
- className="gcu-content-title"
+ className="gcu-content-part-title text-15-normal"
>
- gcu.content.subtitle3
+ gcu.content.title5
</div>
- <div>
- gcu.content.content3
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part5_1
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part5_2
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part5_3
+ </p>
+ <ul
+ className="text-14-normal"
+ >
+ <li>
+ gcu.content.part5_3_list1
+ </li>
+ <li>
+ gcu.content.part5_3_list2
+ </li>
+ <li>
+ gcu.content.part5_3_list3
+ </li>
+ </ul>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part5_4
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part5_5
+ </p>
+ <div
+ className="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title6
</div>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part6_1
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part5_2
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part6_3
+ </p>
+ <ul
+ className="text-14-normal"
+ >
+ <li>
+ gcu.content.part6_3_list1
+ </li>
+ <li>
+ gcu.content.part6_3_list2
+ </li>
+ <li>
+ gcu.content.part6_3_list3
+ </li>
+ </ul>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part6_4
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part6_5
+ </p>
<div
- className="gcu-content-title"
+ className="gcu-content-part-title text-15-normal"
>
- gcu.content.subtitle4
+ gcu.content.title7
</div>
- <div>
- gcu.content.content4
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part7_1
+ </p>
+ <div
+ className="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title8
</div>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part8_1
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part8_2
+ </p>
<div
- className="gcu-content-title"
+ className="gcu-content-part-title text-15-normal"
>
- gcu.content.subtitle5
+ gcu.content.title9
</div>
- <div>
- gcu.content.content5
+ <p
+ className="text-14-normal"
+ >
+ <span
+ className="text-14-bold"
+ >
+ gcu.content.part9_1_title
+ </span>
+ <span>
+ gcu.content.part9_1_content
+ </span>
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ <span
+ className="text-14-bold"
+ >
+ gcu.content.part9_2_title
+ </span>
+ <span>
+ gcu.content.part9_2_content
+ </span>
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ <span
+ className="text-14-bold"
+ >
+ gcu.content.part9_3_title
+ </span>
+ <span>
+ gcu.content.part9_3_content
+ </span>
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ <span
+ className="text-14-bold"
+ >
+ gcu.content.part9_4_title
+ </span>
+ <span>
+ <React.Fragment>
+ test
+ <a
+ href="link.com"
+ rel="noopener noreferrer"
+ target="_blank"
+ >
+ link
+ </a>
+ fin test
+ </React.Fragment>
+ </span>
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ <span
+ className="text-14-bold"
+ >
+ gcu.content.part9_5_title
+ </span>
+ <span>
+ gcu.content.part9_5_content
+ </span>
+ </p>
+ </div>
+</div>
+`;
+
+exports[`GCUContent component should display a link when translation contains <a href=""></a> 1`] = `
+<div
+ className="gcu-content-root"
+>
+ <div
+ className="gcu-content-wrapper"
+ >
+ <h1
+ className="gcu-content-title text-22-normal"
+ >
+ gcu.title
+ </h1>
+ <h2
+ className="gcu-content-subtitle text-16-italic"
+ >
+ gcu.subtitle
+ </h2>
+ <div
+ className="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title1
</div>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part1_1
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part1_2
+ </p>
+ <p
+ className="text-14-italic"
+ >
+ gcu.content.part1_3
+ </p>
<div
- className="gcu-content-title"
+ className="gcu-content-part-title text-15-normal"
>
- gcu.content.subtitle6
+ gcu.content.title2
</div>
- <div>
- gcu.content.content6
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part2_1
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part2_2
+ </p>
+ <ul
+ className="text-14-normal"
+ >
+ <li>
+ gcu.content.part2_2_list1
+ </li>
+ <li>
+ gcu.content.part2_2_list2
+ </li>
+ <li>
+ gcu.content.part2_2_list3
+ </li>
+ </ul>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part2_3
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part2_4
+ </p>
+ <div
+ className="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title3
</div>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part3_1
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part3_2
+ </p>
+ <p
+ className="text-14-italic"
+ >
+ gcu.content.part3_3
+ </p>
+ <p
+ className="text-14-italic"
+ >
+ gcu.content.part3_4
+ </p>
<div
- className="gcu-content-title"
+ className="gcu-content-part-title text-15-normal"
>
- gcu.content.subtitle7
+ gcu.content.title4
</div>
- <div>
- gcu.content.content7_1
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part4_1
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part4_2
+ </p>
+ <div
+ className="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title5
</div>
- <div>
- gcu.content.content7_2
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part5_1
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part5_2
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part5_3
+ </p>
+ <ul
+ className="text-14-normal"
+ >
+ <li>
+ gcu.content.part5_3_list1
+ </li>
+ <li>
+ gcu.content.part5_3_list2
+ </li>
+ <li>
+ gcu.content.part5_3_list3
+ </li>
+ </ul>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part5_4
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part5_5
+ </p>
+ <div
+ className="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title6
</div>
- <div>
- gcu.content.content7_3
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part6_1
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part5_2
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part6_3
+ </p>
+ <ul
+ className="text-14-normal"
+ >
+ <li>
+ gcu.content.part6_3_list1
+ </li>
+ <li>
+ gcu.content.part6_3_list2
+ </li>
+ <li>
+ gcu.content.part6_3_list3
+ </li>
+ </ul>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part6_4
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part6_5
+ </p>
+ <div
+ className="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title7
</div>
- <div>
- gcu.content.content7_4
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part7_1
+ </p>
+ <div
+ className="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title8
</div>
- <div>
- gcu.content.content7_5
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part8_1
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ gcu.content.part8_2
+ </p>
+ <div
+ className="gcu-content-part-title text-15-normal"
+ >
+ gcu.content.title9
</div>
+ <p
+ className="text-14-normal"
+ >
+ <span
+ className="text-14-bold"
+ >
+ gcu.content.part9_1_title
+ </span>
+ <span>
+ gcu.content.part9_1_content
+ </span>
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ <span
+ className="text-14-bold"
+ >
+ gcu.content.part9_2_title
+ </span>
+ <span>
+ gcu.content.part9_2_content
+ </span>
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ <span
+ className="text-14-bold"
+ >
+ gcu.content.part9_3_title
+ </span>
+ <span>
+ gcu.content.part9_3_content
+ </span>
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ <span
+ className="text-14-bold"
+ >
+ gcu.content.part9_4_title
+ </span>
+ <span>
+ <React.Fragment>
+ test
+ <a
+ href="link.com"
+ rel="noopener noreferrer"
+ target="_blank"
+ >
+ link
+ </a>
+ fin test
+ </React.Fragment>
+ </span>
+ </p>
+ <p
+ className="text-14-normal"
+ >
+ <span
+ className="text-14-bold"
+ >
+ gcu.content.part9_5_title
+ </span>
+ <span>
+ gcu.content.part9_5_content
+ </span>
+ </p>
</div>
</div>
`;
diff --git a/src/components/GCU/gcuContent.scss b/src/components/GCU/gcuContent.scss
index 8b3436747460514feac06afd26e370fe3061f499..aaaab426a9cbddc2fc5be93d5aff80ff27ac4559 100644
--- a/src/components/GCU/gcuContent.scss
+++ b/src/components/GCU/gcuContent.scss
@@ -7,7 +7,7 @@
display: flex;
flex-direction: column;
align-items: center;
- text-align: center;
+ text-align: left;
padding: 0 2rem;
.gcu-content-wrapper{
width: 36rem;
@@ -16,11 +16,19 @@
@media #{$large-phone} {
width: 100%;
}
- > div:last-child{
+ .gcu-content-title, .gcu-content-subtitle{
+ text-align: center;
+ }
+ > p {
+ color: $grey-bright;
+ margin-top: 1rem;
+ }
+ > p:last-child{
margin-bottom: 1rem;
}
- .gcu-content-title{
- margin: 1rem 0 0.5rem;
+ .gcu-content-part-title{
+ margin-top: 1.25rem;
+ color: $gold-shadow;
}
}
}
\ No newline at end of file
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 91ceba1a587cd5ccc2637daf7388db914d8f2aa2..f2ab71d22aa2f0d896faf80727808b81b466b300 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -370,28 +370,62 @@
},
"gcu": {
"title": "Conditions générales d’utilisation d’Ecolyo – Service de la Métropole de Lyon",
- "subtitle": "Envie de prendre le temps de relire ces CGU ces Conditions Générales d’Utilisation plus tard ? Vous pourrez les retrouver dans la page Options du service.",
+ "subtitle": "Envie de prendre le temps de relire ces CGU ces Conditions Générales d’Utilisation plus tard ? Vous pourrez les retrouver dans la page Options du service.",
"content": {
- "title": "Ecolyo, késako ?",
- "intro": "Ecolyo un service proposé par la Métropole de Lyon vous permettant de suivre au même endroit vos consommations d’électricité, de gaz et d’eau, en kWh, en litres, en euros et à différentes échelles de temps. Ce service vous permet également de participer à des défis individuels et vous offre une analyse de vos consommations. Des éco-gestes vous sont aussi proposés afin de vous permettre de réduire vos consommations. C’est un service gratuit qui prend la forme d’un site web dit « responsive », c’est-à-dire qu’il peut être consulté sur ordinateur ou sur mobile. Sur mobile il ressemble à une belle application.",
- "subtitle1": "Comment ai-je accès à mes données d’électricité, de gaz et d’eau ?",
- "content1": "Pour visualiser vos consommations réelles et profiter pleinement du potentiel de notre service, il vous faut au minimum un des trois compteurs communicants suivants : Linky (pour l’électricité), Gazpar (pour le gaz), Téléo (pour l’eau). Ces compteurs sont opérés par les gestionnaires de réseaux. Pour Linky, c’est Enedis, le gestionnaire de réseau de distribution d’électricité. Pour Gazpar, GRDF est responsable de cette gestion. Et pour Téléo, c’est Eau du Grand Lyon. Ces acteurs sont responsables de la relève de vos données. C’es données servent notamment votre fournisseur d’électricité, de gaz ou d’eau pour vous facturer. Des fournisseurs d’électricité ou de gaz il y en a des dizaines ! Les gestionnaires de réseaux (… et de votre compteur) ne sont que trois ! Nous avons donc décidé de travailler avec eux, au plus près de la donnée brute issue de vos compteurs. Il vous faudra donc avoir un compte chez Enedis, GRDF et Eau du Grand Lyon pour accéder à vos données. Si vous n’en avez pas, il suffira de vous en créer un. Ceci ne sera à faire qu’une fois, au début.",
- "subtitle2": "Ecolyo se trouve dans un cloud personnel Grand Lyon, qu’est-ce que cela signifie ?",
- "content2": "Comme vous avez dû le remarquer, lors de votre première connexion à Ecolyo vous avez dû vous créer un Cloud Personnel Grand Lyon. Le service Ecolyo se trouve à l’intérieur de cet espace protégé. Dans ce cloud personnel, vous pourrez trouver également d’autres services. Toutes les données traitées par Ecolyo, mais aussi les autres services que vous seriez amenés à utiliser dans ce cloud personnel restent dans ce Cloud Personnel Grand Lyon et n’en sortent pas. Pour en savoir plus sur ce cloud et son utilisation, ainsi que la durée de conservation de vos données, vous pouvez lire les conditions générales d’utilisation du service ici.",
- "subtitle3": "Et donc concrètement pour Ecolyo, quelles données sont collectées et qui y a accès ?",
- "content3": "Pour qu’Ecolyo ait accès à vos données de consommations, vous devrez activer vos connecteurs dans la page Options. À ce moment-là, et à travers un court parcours, vous donnerez votre consentement à partager ces données avec le Service Ecolyo, et ce pour une durée limitée dans le temps. Chaque partenaire définit la durée de base du temps du partage des données. Vos connecteurs, une fois configurés, permettent le transfert de vos données de consommations au service Ecolyo. Le transfert de cette donnée se fait sans que personne n’y accède, pas même la Métropole de Lyon. En effet, ces données sont stockées et travaillées directement dans votre cloud personnel qui en assure la protection. Tous les calculs, analyses et traitements sur ces données sont faites DANS votre espace personnel sans visibilité sur le contenu des données par la Métropole de Lyon. Vous pouvez bien sûr mettre fin au partage de vos données de consommation à plusieurs niveaux : Vous pouvez supprimer le transfert quotidien de vos données en supprimant tout simplement le connecteur dans la Page Options. Attention : lors de la désinstallation du connecteur qui collecte vos données au sein du cloud, celui-ci ne va plus aller chercher vos données. Par contre, votre consentement chez le partenaire fournisseur est toujours actif jusqu’à votre révocation de consentement auprès de ce dernier. Pour révoquer votre consentement, il vous faudra contacter ou agir directement chez le partenaire en question : Enedis pour l’électricité ou GRDF pour le gaz. Pour l’électricité, vous pouvez peut supprimer votre consentement à partager vos données en écrivant directement à dataconnect(at)enedis.fr. Pour le gaz, il vous faudra vous connecter à votre espace GRDF et supprimer le consentement donné à la Métropole de Lyon dans la partie « Suivi de Consommations » puis « Données Consultées ». Pour supprimer l’ensemble de vos données ainsi que votre espace personnel Grand Lyon, contactez nous à ecolyo(at)grandlyon.com.",
- "subtitle4": "Personne n’a donc accès à mes données, pas même la métropole de Lyon, vraiment ?",
- "content4": "Comme expliqué dans le paragraphe précédent, la Métropole de Lyon n’accède ni à vos données de consommations ni aux données que vous communiqueriez via certaines parties du service comme le formulaire (celui-là même qui permet l’analyse de vos consommations personnalisée ainsi qu’une sélection d’éco-gestes personnalisés). Toutes ces informations sont bien gardées au chaud dans votre cloud personnel Grand Lyon. Seul vous pouvez accepter de partager vos données, documents ou fichiers privées avec la Métropole de Lyon, ses partenaires ou d’autres utilisateurs ou acteurs (publics ou privés) avec un consentement éclairé et une action expresse de votre part. La Métropole de Lyon n’a accès qu’à vos données de compte choisies, c’est-à-dire à l’email utilisé la toute première fois lors de la création de votre compte au niveau de la plateforme de cloud personnel. Nous ne l’utiliserons qu’à des fins de gestion du compte et de communication avec l’usager. Plus clairement, et en dehors de toute expérimentation, nous ne vous contacterons qu’en cas de problème majeur avec la gestion de votre compte ou bien sûr si vous nous contactez. Par ailleurs, vous pouvez recevoir un email de notre part indiquant la mise à disposition d'un nouveau bilan (mensuel) de vos consommations. Vous pouvez gérer l'inscription ou la désincription à cette notitication par email via la page Options du service. D’autre part sachez que, dans le cadre de l’amélioration de la qualité de notre service, des métriques d’usages sont périodiquement remontées et ce, de manière anonyme, sur un serveur. Par métrique d’usage on entend par exemple, le nombre de connecteurs connectés, le nombre de défis gagnés. Tout cela aura été anonymisé avant l’arrivée sur le serveur. Par exemple si VOUS avez installé uniquement le connecteur électricité et avait gagné le défi Simone Veille, nous récolterons simplement une information du type « UN utilisateur a connecté son connecteur électricité et a gagné le défi Simone Veille. » sans connaître l’identité de cet utilisateur.",
- "subtitle5": "Mentions Légales",
- "content5": "Pour plus d’information sur l’ensemble de vos droits concernant vos données personnelles, retrouvez ici les mentions légales du service.",
- "subtitle6": "Encore des questions ?",
- "content6": "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. Dernière option, contactez-nous directement à ecolyo(at)grandlyon.com.",
- "subtitle7": "Lexique",
- "content7_1": "Cloud personnel Grand Lyon : Cloud personnel : appelé aussi le « domicile numérique », le cloud personnel est souvent réduit à un simple espace de stockage de documents mais il est bien plus que ça. C'est un espace individuel et sécurisé où vous pouvez accéder à des services sans exposer aucune donnée à l’extérieur. Vous seul pouvez y accéder, personne d'autre.",
- "content7_2": "Connecteur : def Inés ?",
- "content7_3": "Compteur communicant : Un compteur communicant est un compteur qui mesure de manière précise et détaillée vos consommations et peut transmettre ces données au gestionnaire de réseau via une technologie radio (c'est le cas pour Gazpar et Téléo par exemple) ou via les réseaux électriques (via Courant Porteur en ligne, c'est le cas pour Linky par exemple).",
- "content7_4": "Fournisseur : Votre fournisseur d’électricité, de gaz ou d’eau est l’entreprise qui vous facture votre électricité, gaz ou eau. Côté électricité il en existe aujourd’hui plus de 50, chacun proposant des tarifs différents.",
- "content7_5": "Gestionnaire de réseau de distribution : Appelé aussi parfois distributeur, il est en charge de la livraison de votre électricité, gaz ou eau jusqu’à votre domicile. Il est aussi en charge du compteur qui relève vos consommations. Il transmet vos données de consommations à votre fournisseur afin qu’il vous facture. Il peut également les transmettre à tout acteur avec qui vous avez décidé de partager ces données."
+ "title1": "Ecolyo, késako ?",
+ "part1_1": "Ecolyo est un service proposé par la Métropole de Lyon vous permettant de suivre au même endroit vos consommations d’électricité, de gaz et d’eau, en kWh, en litres, en euros et à différentes échelles de temps. Ce service vous permet également de participer à des défis individuels et vous offre une analyse de vos consommations. Des éco-gestes vous sont aussi proposés afin de vous permettre de réduire vos consommations.",
+ "part1_2": "C’est un service gratuit qui prend la forme d’un site web dit « responsive », c’est-à-dire qu’il peut être consulté sur ordinateur ou sur mobile. Sur mobile, c’est une application que l’on a souhaitée ergonomique, réactive et esthétique pour votre plaisir de navigation et d’utilisation au quotidien.",
+ "part1_3": "Tous les termes un peu « techniques » sont définis en bas de page pour vous permettre une compréhension limpide des fonctionnalités et des CGU du service Ecolyo.",
+ "title2": "Quelles fonctionnalités le service propose-t-il ?",
+ "part2_1": "La fonctionnalité principale d’Ecolyo est la visualisation, au même endroit, de vos consommations d’électricité, de gaz et d’eau et ce, à différents pas de temps (de la demi-heure – uniquement pour l’électricité, à plusieurs années, en passant par les pas de temps journaliers et mensuels). La visualisation des consommations se fait en kWh pour l’énergie et en L pour l’eau ainsi qu’en euros (euros résultant d’un prix moyenné).",
+ "part2_2": "Au-delà de la visualisation de vos consommations et parce que nous souhaitons vous aider à diminuer ces consommations vous retrouverez plusieurs autres pages :",
+ "part2_2_list1": "Défis : Des quizz, et actions à mettre en place vous seront proposés pour vous pousser à réduire vos consommations.",
+ "part2_2_list2": "Défis : Des quizz, et actions à mettre en place vous seront proposés pour vous pousser à réduire vos consommations.",
+ "part2_2_list3": "Analyse : Une analyse de vos consommations réelles en comparaison à celle d’un foyer étant proche d’une vôtre.",
+ "part2_3": "Pour la page Analyse ainsi que pour la partie personnalisation des éco-gestes, des éléments supplémentaires sur votre profil vous seront demandés. L’ensemble de ces informations récoltées à l’aide du formulaire peuvent être modifiées par la suite.",
+ "part2_4": "Dernière page : la page Options dans laquelle vous pourrez retrouver les connecteurs - services vous permettant d’aller récupérer vos données d’électricité, de gaz et d’eau - , une foire aux questions, et de quoi ajuster votre profil.",
+ "title3": "Comment ai-je accès à mes données d’électricité, de gaz et d’eau ?",
+ "part3_1": "Pour visualiser vos consommations réelles et profiter pleinement du potentiel de notre service, il vous faut au minimum un des trois compteurs communicants suivants : Linky (pour l’électricité), Gazpar (pour le gaz), Téléo (pour l’eau).",
+ "part3_2": "Ces compteurs sont opérés par les gestionnaires de réseaux. Pour Linky, c’est Enedis, le gestionnaire de réseau de distribution d’électricité. Pour Gazpar, GRDF est responsable de cette gestion. Et pour Téléo, c’est Eau du Grand Lyon.",
+ "part3_3": "Ces acteurs sont responsables de la relève de vos données. Ces données servent notamment à votre fournisseur d’électricité, de gaz ou d’eau pour permettre la facturation de vos consommations d’énergie. Des fournisseurs d’électricité ou de gaz il y en a des dizaines ! Les gestionnaires de réseaux (… et de votre compteur) ne sont qu’au nombre de trois ! Nous avons donc décidé de travailler avec eux, au plus près de la donnée brute issue de vos compteurs.",
+ "part3_4": "Il vous faudra donc avoir un compte chez Enedis, GRDF et Eau du Grand Lyon pour accéder à vos données. Si vous n’en avez pas, il suffira de vous en créer un. Ceci ne sera à faire qu’une fois, au début.",
+ "title4": "Ecolyo se trouve dans un cloud personnel Grand Lyon, qu’est-ce que cela signifie ?",
+ "part4_1": "Comme vous avez dû le remarquer, lors de votre première connexion à Ecolyo vous avez dû vous créer un compte Cloud Personnel Grand Lyon. Ce cloud personnel est un espace sécurisé porté par l’ambition de vous apporter visibilité, transparence et maitrise sur l’usage de vos données personnelles, et dont les fonctionnalités vous permettant de récupérer, synchroniser, stocker et partager vos données avec les destinataires de votre choix. Le service Ecolyo se déploie à l’intérieur de cet espace protégé. Dans ce cloud personnel, vous pourrez accéder également à d’autres services. Toutes les données traitées par Ecolyo, mais aussi les autres services que vous seriez amenés à utiliser dans ce cloud personnel restent dans ce Cloud Personnel Grand Lyon et n’en sortent pas, sauf si vous décidez vous-même de partager vos données avec des tiers.",
+ "part4_2": "Pour en savoir plus sur ce cloud et son utilisation, ainsi que la durée de conservation de vos données, vous pouvez lire les conditions générales d’utilisation du service ici.",
+ "title5": "Et donc concrètement pour Ecolyo, quelles données sont collectées et qui y a accès ?",
+ "part5_1": "Pour qu’Ecolyo ait accès à vos données de consommations, vous devrez activer vos connecteurs dans la page Options. À ce moment-là, et à travers un parcours qui vous conduira de manière intuitive sur le site de chacun des gestionnaires de réseaux concerné, vous pourrez donner votre consentement à partager ces données avec le Service Ecolyo, et ce pour une durée limitée dans le temps. Pour les données électriques (chez Enedis), elle est par défaut de 6 mois. Pour les données gaz, cela sera à vous de la définir (nous vous recommandons 1 an pour une expérience optimale).",
+ "part5_2": "Vos connecteurs, une fois configurés, permettent le transfert de vos données de consommations au service Ecolyo. Le transfert de cette donnée se fait sans que personne n’accède à leur contenu, pas même la Métropole de Lyon. En effet, ces données sont stockées et traitées directement dans votre cloud personnel qui en assure la protection. Tous les calculs, analyses et traitements sur ces données sont faites DANS votre espace personnel sans visibilité sur le contenu des données par la Métropole de Lyon.",
+ "part5_3": "Vous pouvez bien sûr mettre fin à la récupération/ au transfert de vos données de consommation sur votre espace cloud personnel à tout moment et à plusieurs niveaux :",
+ "part5_3_list1": "Vous pouvez supprimer le transfert quotidien de vos données en supprimant tout simplement le connecteur dans la Page Options.",
+ "part5_3_list2": "Attention : lors de la désinstallation du connecteur qui collecte vos données au sein du cloud, celui-ci ne va plus aller chercher vos données. Par contre, votre consentement chez le partenaire fournisseur est toujours actif jusqu’à votre révocation de consentement auprès de ce dernier. Pour révoquer votre consentement, il vous faudra contacter ou agir directement chez le partenaire en question : Enedis pour l’électricité ou GRDF pour le gaz. Pour l’électricité, vous pouvez peut supprimer votre consentement à partager vos données en écrivant directement à dataconnect(at)enedis.fr. Pour le gaz, il vous faudra vous connecter à <a href=\"https://monespace.grdf.fr/monespace/connexion\">votre espace GRDF</a> et supprimer le consentement donné à la Métropole de Lyon dans la partie « Suivi de Consommations » puis « Données Consultées ». Au terme de la durée initiale de validité du consentement de 6 mois ou de la durée que vous aurez définie librement, votre consentement sera considéré comme révolu. Tout nouveau transfert de données sera donc soumis à nouveau au recueil préalable de votre consentement.",
+ "part5_3_list3": "Pour supprimer l’ensemble de vos données ainsi que votre espace personnel Grand Lyon, vous devez demander la suppression de votre cloud. Pour faire cela, rendez-vous dans les paramètres de votre cloud personnel via la barre blanche en haut d’Ecolyo et appuyez sur le bouton « Supprimer mon compte » dans la partie paramètres.",
+ "part5_4": "Des données sur le profil de votre foyer peuvent être également remplies au sein de l’application. Ces données s’enrichiront au fur et à mesure de votre utilisation du service avec d’autres informations : défis réalisés, étoiles gagnées, etc. L’ensemble de ces données restent à l’intérieur de votre cloud personnel, sans que personne n’y ait accès.",
+ "part5_5": "Enfin, afin de permettre une mise à jour quotidienne de vos données de consommations, vos identifiants Eau du Grand Lyon, un jeton d’identification Enedis et/ou GRDF ainsi que vos numéros de compteurs sont stockés dans votre cloud personnel – sans droit de regard de la Métropole de Lyon.",
+ "title6": "Personne n’a donc accès à mes données, pas même la Métropole de Lyon, vraiment ?",
+ "part6_1": "Conformément aux indications du paragraphe précédent, la Métropole de Lyon n’accède ni à vos données de consommations ni aux données utilisées via certaines fonctionnalités du service comme le formulaire (celui-là même qui permet l’analyse de vos consommations personnalisée ainsi qu’une sélection d’éco-gestes personnalisés). Toutes ces informations sont bien gardées au chaud dans votre cloud personnel Grand Lyon.",
+ "part6_2": "Seul vous pouvez accepter de partager vos données, documents ou fichiers privés avec la Métropole de Lyon, ses partenaires ou d’autres utilisateurs ou acteurs (publics ou privés) après recueil de votre consentement éclairé et par une action expresse de votre part.",
+ "part6_3": "La Métropole de Lyon n’a accès qu’à vos données de compte, librement renseignées par vos soins, c’est-à-dire à l’email utilisé la toute première fois lors de la création de votre compte au niveau de la plateforme de cloud personnel. La Métropole de Lyon utilisera vos données de comptes à des fins de gestion de celui-ci et de communication avec vous, afin de vous tenir informé.e :",
+ "part6_3_list1": "En réponse à vos demandes, si vous avez pris l’initiative de nous contacter. ",
+ "part6_3_list2": "En cas de problème majeur avec la gestion de votre compte.",
+ "part6_3_list3": "Des évolutions et de la qualité du service.",
+ "part6_4": "Par ailleurs, vous pouvez recevoir un email de notre part indiquant la mise à disposition d'un nouveau bilan (mensuel) de vos consommations. Vous pouvez gérer l'inscription ou la désincription à cette notification par email via la page Options du service.",
+ "part6_5": "D’autre part sachez que, dans le cadre de l’amélioration de la qualité de notre service, des métriques d’usages sont périodiquement remontées et ce, de manière anonyme, sur un serveur. Par métrique d’usage on entend par exemple, le nombre de connecteurs connectés, le nombre de défis gagnés. Tout cela aura été anonymisé avant le transfert et le traitement des données sur le serveur. Par exemple si VOUS avez installé uniquement le connecteur électricité et avez gagné le défi Simone Veille, nous récolterons simplement une information du type « UN utilisateur a connecté son connecteur électricité et a gagné le défi Simone Veille. » sans connaître l’identité de cet utilisateur.",
+ "title7": "Mentions Légales",
+ "part7_1": "Pour plus d’information sur l’ensemble de vos droits concernant vos données personnelles, retrouvez les mentions légales dans la page Options du service.",
+ "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_2": "Dernière option, contactez-nous directement à ecolyo(at)grandlyon.com.",
+ "title9": "LEXIQUE",
+ "part9_1_title": "Cloud personnel Grand Lyon : ",
+ "part9_1_content": "Cloud personnel : appelé aussi le « domicile numérique », le cloud personnel est souvent réduit à un simple espace de stockage de documents mais il est bien plus que ça. C'est un espace individuel et sécurisé où vous pouvez accéder à des services sans exposer aucune donnée à l’extérieur. Vous seul pouvez y accéder, personne d'autre.",
+ "part9_2_title": "Connecteur : ",
+ "part9_2_content": "Un connecteur est un service, installé dans votre cloud personnel également, qui a pour but uniquement d’aller récupérer les données auprès de différents partenaires/sources de données. Dans le cadre d’Ecolyo, trois connecteurs sont pré-installés dans votre cloud personne : celui d’Enedis, celui de GRDF et celui d’Eau du Grand Lyon.",
+ "part9_3_title": "Compteur communicant : ",
+ "part9_3_content": "Un compteur communicant est un compteur qui mesure de manière précise et détaillée vos consommations et peut transmettre ces données au gestionnaire de réseau via une technologie radio (c'est le cas pour Gazpar et Téléo par exemple) ou via les réseaux électriques (via Courant Porteur en ligne, c'est le cas pour Linky par exemple).",
+ "part9_4_title": "Fournisseur : ",
+ "part9_4_content": "Votre fournisseur d’électricité, de gaz ou d’eau est l’entreprise qui vous facture votre électricité, gaz ou eau. Côté électricité il en existe <a href=\"https://www.enedis.fr/liste-des-fournisseurs-delectricite\">aujourd’hui plus de 50</a>, chacun proposant des tarifs différents.",
+ "part9_5_title": "Gestionnaire de réseau de distribution : ",
+ "part9_5_content": "Appelé aussi parfois distributeur, il est en charge de la livraison de votre électricité, gaz ou eau jusqu’à votre domicile. Il est aussi en charge du compteur qui relève vos consommations. Il transmet vos données de consommations à votre fournisseur afin qu’il effectue la facturation de vos consommations d’énergie. Il peut également les transmettre à tout acteur avec qui vous avez décidé de partager ces données."
}
},
"gcu_modal": {