diff --git a/src/components/GCU/GCU.spec.tsx b/src/components/GCU/GCUContent.spec.tsx
similarity index 64%
rename from src/components/GCU/GCU.spec.tsx
rename to src/components/GCU/GCUContent.spec.tsx
index 9c0c7ccbba0b4f483effa31e9fc1fd739ac1bf8a..9662e7bc7410f29303c2f6d5530db2903800f72f 100644
--- a/src/components/GCU/GCU.spec.tsx
+++ b/src/components/GCU/GCUContent.spec.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import { shallow } from 'enzyme'
-import GCU from 'components/GCU/GCU'
+import GCUContent from 'components/GCU/GCUContent'
jest.mock('cozy-ui/transpiled/react/I18n', () => {
return {
@@ -12,9 +12,9 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}
})
-describe('GCU component', () => {
+describe('GCUContent component', () => {
it('should be rendered correctly', () => {
- const component = shallow(<GCU />).getElement()
+ const component = shallow(<GCUContent />).getElement()
expect(component).toMatchSnapshot()
})
})
diff --git a/src/components/GCU/GCU.tsx b/src/components/GCU/GCUContent.tsx
similarity index 83%
rename from src/components/GCU/GCU.tsx
rename to src/components/GCU/GCUContent.tsx
index e5179de83d6f87c281856c848057884b6b534706..172c6a78b88f30e6238a1dd98745173e51d30060 100644
--- a/src/components/GCU/GCU.tsx
+++ b/src/components/GCU/GCUContent.tsx
@@ -1,16 +1,18 @@
import React from 'react'
-import './gcu.scss'
+import './gcuContent.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-interface GCUProps {
+interface GCUContentProps {
fromOption?: boolean
}
-const GCU: React.FC<GCUProps> = ({ fromOption = false }: GCUProps) => {
+const GCUContent: React.FC<GCUContentProps> = ({
+ fromOption = false,
+}: GCUContentProps) => {
const { t } = useI18n()
return (
- <div className="gcu-root">
- <div className="gcu-content">
+ <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>
@@ -38,4 +40,4 @@ const GCU: React.FC<GCUProps> = ({ fromOption = false }: GCUProps) => {
)
}
-export default GCU
+export default GCUContent
diff --git a/src/components/GCU/GCULink.spec.tsx b/src/components/GCU/GCULink.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..58988606516a277e9efb68559a440f7bb2e47677
--- /dev/null
+++ b/src/components/GCU/GCULink.spec.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import LegalNoticeLink from 'components/LegalNotice/LegalNoticeLink'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+describe('LegalNoticeLink component', () => {
+ it('should be rendered correctly', () => {
+ const component = shallow(<LegalNoticeLink />).getElement()
+ expect(component).toMatchSnapshot()
+ })
+})
diff --git a/src/components/GCU/GCULink.tsx b/src/components/GCU/GCULink.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..105d65d2f990f479080fce8317f92eff033aad84
--- /dev/null
+++ b/src/components/GCU/GCULink.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import './gcuLink.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 LegalNoticeIcon from 'assets/icons/ico/legal-notice.svg'
+
+const GCULink: React.FC = () => {
+ const { t } = useI18n()
+ return (
+ <div className="gcu-link-root">
+ <div className="gcu-link-content">
+ <div className="gcu-link-header text-16-normal-uppercase">
+ {t('gcu_option.title')}
+ </div>
+ <Link
+ className="gcu-link-card-link"
+ component={RouterLink}
+ to="options/gcu"
+ >
+ <div className="card">
+ <div className="gcu-link-card">
+ <div className="gcu-link-card-content">
+ <StyledIcon
+ className="gcu-link-card-content-icon"
+ icon={LegalNoticeIcon}
+ size={50}
+ />
+ <div className="gcu-link-card-content-title">
+ {t('gcu_option.read_gcu')}
+ </div>
+ </div>
+ </div>
+ </div>
+ </Link>
+ </div>
+ </div>
+ )
+}
+
+export default GCULink
diff --git a/src/components/GCU/GCUModal.tsx b/src/components/GCU/GCUModal.tsx
index 5861ef9bf1fe1f7cd098ebdd8182652d9557b4e1..c93837cdc2e16b8ad1485fbfa59b7d496f05a3ec 100644
--- a/src/components/GCU/GCUModal.tsx
+++ b/src/components/GCU/GCUModal.tsx
@@ -1,10 +1,10 @@
import React, { useCallback, useState } from 'react'
-import './gcumodal.scss'
+import './gcuModal.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useDispatch } from 'react-redux'
import { updateProfile } from 'store/profile/profile.actions'
import { Button, Dialog } from '@material-ui/core'
-import GCU from 'components/GCU/GCU'
+import GCUContent from 'components/GCU/GCUContent'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import arrowIcon from 'assets/icons/visu/gcu/gcu-arrow.svg'
import { DateTime } from 'luxon'
@@ -51,7 +51,7 @@ const GCUModal: React.FC = () => {
</div>
<div className="gcu-modal-root">
<div className="gcu-modal-content" onScroll={handleScroll}>
- <GCU />
+ <GCUContent />
</div>
<div className="gcu-modal-footer">
{!isBottom && (
diff --git a/src/components/GCU/GCUView.spec.tsx b/src/components/GCU/GCUView.spec.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..809feee5f8f215e804951195b91b10e2448ca2a3
--- /dev/null
+++ b/src/components/GCU/GCUView.spec.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import GCUView from 'components/GCU/GCUView'
+
+describe('GCUView component', () => {
+ it('should be rendered correctly', () => {
+ const component = shallow(<GCUView />).getElement()
+ expect(component).toMatchSnapshot()
+ })
+})
diff --git a/src/components/GCU/GCUView.tsx b/src/components/GCU/GCUView.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..775fc21005a4d157227ef51462a009805fa5a114
--- /dev/null
+++ b/src/components/GCU/GCUView.tsx
@@ -0,0 +1,29 @@
+import React, { useCallback, useState } from 'react'
+import CozyBar from 'components/Header/CozyBar'
+import Header from 'components/Header/Header'
+import Content from 'components/Content/Content'
+import GCUContent from 'components/GCU/GCUContent'
+
+const GCUView: React.FC = () => {
+ const [headerHeight, setHeaderHeight] = useState<number>(0)
+
+ const defineHeaderHeight = useCallback((height: number) => {
+ setHeaderHeight(height)
+ }, [])
+
+ return (
+ <>
+ <CozyBar titleKey={'common.title_gcu'} displayBackArrow={true} />
+ <Header
+ setHeaderHeight={defineHeaderHeight}
+ desktopTitleKey={'common.title_gcu'}
+ displayBackArrow={true}
+ ></Header>
+ <Content height={headerHeight}>
+ <GCUContent />
+ </Content>
+ </>
+ )
+}
+
+export default GCUView
diff --git a/src/components/GCU/__snapshots__/GCU.spec.tsx.snap b/src/components/GCU/__snapshots__/GCUContent.spec.tsx.snap
similarity index 91%
rename from src/components/GCU/__snapshots__/GCU.spec.tsx.snap
rename to src/components/GCU/__snapshots__/GCUContent.spec.tsx.snap
index e077cfd5b9d104f492c024840f5b862da8ce1367..0329a997882e646d7c6d7728acba22944ae8bd25 100644
--- a/src/components/GCU/__snapshots__/GCU.spec.tsx.snap
+++ b/src/components/GCU/__snapshots__/GCUContent.spec.tsx.snap
@@ -1,11 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`GCU component should be rendered correctly 1`] = `
+exports[`GCUContent component should be rendered correctly 1`] = `
<div
- className="gcu-root"
+ className="gcu-content-root"
>
<div
- className="gcu-content"
+ className="gcu-content-wrapper"
>
<h1
className="text-22-normal"
diff --git a/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap b/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..d28090c0af60fa81044afbab646c2c5ec48bda23
--- /dev/null
+++ b/src/components/GCU/__snapshots__/GCULink.spec.tsx.snap
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LegalNoticeLink component should be rendered correctly 1`] = `
+<div
+ className="legal-notice-root"
+>
+ <div
+ className="legal-notice-content"
+ >
+ <div
+ className="legal-notice-header text-16-normal-uppercase"
+ >
+ legal.title_legal
+ </div>
+ <ForwardRef(WithStyles)
+ className="legal-notice-card-link"
+ component={
+ Object {
+ "$$typeof": Symbol(react.forward_ref),
+ "displayName": "Link",
+ "propTypes": Object {
+ "innerRef": [Function],
+ "onClick": [Function],
+ "replace": [Function],
+ "target": [Function],
+ "to": [Function],
+ },
+ "render": [Function],
+ }
+ }
+ to="options/legalnotice"
+ >
+ <div
+ className="card"
+ >
+ <div
+ className="legal-notice-card"
+ >
+ <div
+ className="legal-notice-card-content"
+ >
+ <StyledIcon
+ className="legal-notice-card-content-icon"
+ icon="test-file-stub"
+ size={50}
+ />
+ <div
+ className="legal-notice-card-content-title"
+ >
+ legal.read_legal
+ </div>
+ </div>
+ </div>
+ </div>
+ </ForwardRef(WithStyles)>
+ </div>
+</div>
+`;
diff --git a/src/components/GCU/__snapshots__/GCUView.spec.tsx.snap b/src/components/GCU/__snapshots__/GCUView.spec.tsx.snap
new file mode 100644
index 0000000000000000000000000000000000000000..33e490ab2cee7cf73924e66f7e9dfaed67e42d16
--- /dev/null
+++ b/src/components/GCU/__snapshots__/GCUView.spec.tsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GCUView component should be rendered correctly 1`] = `
+<React.Fragment>
+ <CozyBar
+ displayBackArrow={true}
+ titleKey="common.title_gcu"
+ />
+ <Header
+ desktopTitleKey="common.title_gcu"
+ displayBackArrow={true}
+ setHeaderHeight={[Function]}
+ />
+ <Content
+ height={0}
+ >
+ <GCUContent />
+ </Content>
+</React.Fragment>
+`;
diff --git a/src/components/GCU/gcu.scss b/src/components/GCU/gcuContent.scss
similarity index 67%
rename from src/components/GCU/gcu.scss
rename to src/components/GCU/gcuContent.scss
index f3db9ccf2618050cb4cb410e0072b330ff23e373..94efd38f055f4fd28ce2c022880d61a74a9758d7 100644
--- a/src/components/GCU/gcu.scss
+++ b/src/components/GCU/gcuContent.scss
@@ -1,11 +1,14 @@
-.gcu-root{
+@import 'src/styles/base/color';
+
+.gcu-content-root{
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
- .gcu-content{
+ .gcu-content-wrapper{
+ color: $grey-bright;
margin: 2rem;
> div:last-child{
margin-bottom: 1rem;
diff --git a/src/components/GCU/gcuLink.scss b/src/components/GCU/gcuLink.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b7545dd98ecfd6a257b712c512e5ec91e04f5ac4
--- /dev/null
+++ b/src/components/GCU/gcuLink.scss
@@ -0,0 +1,64 @@
+@import 'src/styles/base/breakpoint';
+@import 'src/styles/base/color';
+
+.gcu-link-root {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ color: $white;
+ padding: 1rem 1.5rem 0;
+ margin-top: 1rem;
+ .gcu-link-header {
+ margin-bottom: 1.25rem;
+ }
+ .gcu-link-content {
+ p {
+ color: $white;
+ }
+ a {
+ color: $white;
+ text-decoration: none;
+ }
+ li {
+ margin: 1rem 0;
+ }
+ h2 {
+ color: $white;
+ }
+ h3 {
+ color: $white;
+ margin: 2.5rem 0 1rem;
+ }
+ .ln-contact {
+ color: $multi-color;
+ }
+ width: 45.75rem;
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ }
+}
+.gcu-link-card-link {
+ color: black;
+}
+.gcu-link-card {
+ display: flex;
+ flex-direction: row;
+ margin: -0.75rem 0;
+ width: 100%;
+ @media #{$large-phone} {
+ width: 100%;
+ }
+ .gcu-link-card-content {
+ display: flex;
+ flex-direction: row;
+ .gcu-link-card-content-icon {
+ margin: 0.5rem 0;
+ }
+ .gcu-link-card-content-title {
+ margin: 0 1rem;
+ align-self: center;
+ }
+ }
+}
diff --git a/src/components/LegalNotice/LegalNoticeLink.spec.tsx b/src/components/LegalNotice/LegalNoticeLink.spec.tsx
index 7f01b8a67828fe2743da996a1990e573db32dd30..9302b6be360e376f21cd1eacf9ffeab80de695ab 100644
--- a/src/components/LegalNotice/LegalNoticeLink.spec.tsx
+++ b/src/components/LegalNotice/LegalNoticeLink.spec.tsx
@@ -1,20 +1,20 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import LegalNoticeLink from 'components/LegalNotice/LegalNoticeLink'
-
-jest.mock('cozy-ui/transpiled/react/I18n', () => {
- return {
- useI18n: jest.fn(() => {
- return {
- t: (str: string) => str,
- }
- }),
- }
-})
-
-describe('LegalNoticeView component', () => {
- it('should be rendered correctly', () => {
- const component = shallow(<LegalNoticeLink />).getElement()
- expect(component).toMatchSnapshot()
- })
-})
+import React from 'react'
+import { shallow } from 'enzyme'
+import GCULink from 'components/GCU/GCULink'
+
+jest.mock('cozy-ui/transpiled/react/I18n', () => {
+ return {
+ useI18n: jest.fn(() => {
+ return {
+ t: (str: string) => str,
+ }
+ }),
+ }
+})
+
+describe('GCULink component', () => {
+ it('should be rendered correctly', () => {
+ const component = shallow(<GCULink />).getElement()
+ expect(component).toMatchSnapshot()
+ })
+})
diff --git a/src/components/Options/OptionsView.tsx b/src/components/Options/OptionsView.tsx
index f7aebc22c445022249d5a023a012fd4dd2201dbb..73205bfea2de34af490a7c9e461248f598a96471 100644
--- a/src/components/Options/OptionsView.tsx
+++ b/src/components/Options/OptionsView.tsx
@@ -6,6 +6,7 @@ import KonnectorViewerList from 'components/Konnector/KonnectorViewerList'
import ReportOptions from 'components/Options/ReportOptions'
import FAQLink from 'components/FAQ/FAQLink'
import LegalNoticeLink from 'components/LegalNotice/LegalNoticeLink'
+import GCULink from 'components/GCU/GCULink'
import Version from 'components/Version/Version'
import ProfileTypeOptions from './ProfileTypeOptions'
@@ -29,6 +30,7 @@ const OptionsView: React.FC = () => {
<ReportOptions />
<FAQLink />
<LegalNoticeLink />
+ <GCULink />
<div className="parameters-logos">
<img src={logos} alt="ensemble de logos" />
</div>
diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx
index 05ea8f4de5d2c6fb9ca051ff9f4715ae7282cab0..5ad8773911d676ae3de6ec7e942756c071e2ded2 100644
--- a/src/components/Routes/Routes.tsx
+++ b/src/components/Routes/Routes.tsx
@@ -20,6 +20,7 @@ const FAQView = lazy(() => import('components/FAQ/FAQView'))
const LegalNoticeView = lazy(() =>
import('components/LegalNotice/LegalNoticeView')
)
+const GCUView = lazy(() => import('components/GCU/GCUView'))
const AnalysisView = lazy(() => import('components/Analysis/AnalysisView'))
const ProfileTypeView = lazy(() =>
import('components/ProfileType/ProfileTypeView')
@@ -68,6 +69,7 @@ const Routes = () => {
<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} />
<Route path={'/options'} exact component={OptionsView} />
<Route path="/analysis" component={AnalysisView} />
diff --git a/src/locales/fr.json b/src/locales/fr.json
index b44369f9f3c22a750468ca9451acaa80b8058296..5f9e04fbf796451ee3d72517541b09d991775c5c 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -11,6 +11,7 @@
"title_profiletype": "Ajuster mon profil",
"title_faq": "FAQ",
"title_legal_notice": "Mentions légales",
+ "title_gcu": "CGU",
"accessibility": {
"loading": "Chargement"
}
@@ -402,6 +403,10 @@
"button_accept": "Accepter les conditions générales d'utilisation"
}
},
+ "gcu_option": {
+ "title": "Conditions générales d’utilisation",
+ "read_gcu": "Lire les CGU"
+ },
"header": {
"accessibility": {
"button_back": "Retour à la page précédente",