Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import React, { useCallback, useState } from 'react'
import classNames from 'classnames'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useDispatch } from 'react-redux'
import { Button } from '@material-ui/core'
import TermsService from 'services/terms.service'
import { useClient } from 'cozy-client'
import DataShareConsentContent from './DataShareConsentContent'
import './termsView.scss'
import { useHistory } from 'react-router-dom'
import { decoreText } from 'utils/decoreText'
import { updateTermValidation } from 'store/global/global.actions'
const TermsView: React.FC = () => {
const { t } = useI18n()
const client = useClient()
const dispatch = useDispatch()
const history = useHistory()
const [GCUValidation, setGCUValidation] = useState<boolean>(false)
const [dataConsentValidation, setDataConsentValidation] = useState<boolean>(
false
)
const handleGCUValidate = useCallback(() => {
setGCUValidation(prev => !prev)
}, [])
const handleDataConsentValidation = useCallback(() => {
setDataConsentValidation(prev => !prev)
}, [])
const handleTermValidate = useCallback(async () => {
const termsService = new TermsService(client)
const createdTerm = await termsService.createTerm()
if (createdTerm) {
dispatch(updateTermValidation(true))
}
history.push('/consumption')
}, [dispatch, client, history])
return (
<div className="terms-wrapper">
<div className="terms-content">
<DataShareConsentContent />
<label
className={classNames('checkbox', {
['answer-checked']: dataConsentValidation,
})}
>
<input
type={'checkbox'}
name="Data-consent-validation"
onChange={handleDataConsentValidation}
checked={dataConsentValidation}
/>
{t('dataShare.validDataConsent')}
</label>
<label
className={classNames('checkbox', {
['answer-checked']: GCUValidation,
})}
>
<input
type={'checkbox'}
name="GCU-validation"
onChange={handleGCUValidate}
checked={GCUValidation}
/>
<span>
{decoreText(t('dataShare.validCGU'))}
{decoreText(t('dataShare.validLegal'))}
</span>
</label>
</div>
<div className="terms-footer">
<Button
aria-label={t('gcu_modal.accessibility.button_accept')}
onClick={handleTermValidate}
className={classNames('gcu-modal-button', {
['disabled']: !GCUValidation || !dataConsentValidation,
})}
disabled={!GCUValidation || !dataConsentValidation}
classes={{
root: 'btn-profile-next rounded',
label: 'text-16-bold',
}}
>
{t('tutorial_welcome.accessibility.finish')}
</Button>
</div>
</div>
)
}
export default TermsView