feat: add GCU link in options

src/components/GCU/GCU.spec.tsx → src/components/GCU/GCUContent.spec.tsx

 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()
   })
 })

src/components/GCU/GCU.tsx → src/components/GCU/GCUContent.tsx

 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

src/components/GCU/GCULink.spec.tsx

+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()
+  })
+})

src/components/GCU/GCULink.tsx

+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

src/components/GCU/GCUModal.tsx

 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 && (

src/components/GCU/GCUView.spec.tsx

+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()
+  })
+})

src/components/GCU/GCUView.tsx

+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

src/components/GCU/__snapshots__/GCU.spec.tsx.snap → src/components/GCU/__snapshots__/GCUContent.spec.tsx.snap

 // 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"

src/components/GCU/__snapshots__/GCULink.spec.tsx.snap

+// 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>
+`;

src/components/GCU/__snapshots__/GCUView.spec.tsx.snap

+// 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>
+`;

src/components/GCU/gcu.scss → src/components/GCU/gcuContent.scss

-.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;

src/components/GCU/gcuLink.scss

+@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;
+    }
+  }
+}

src/components/LegalNotice/LegalNoticeLink.spec.tsx

-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()
+  })
+})

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>

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} />

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",