Newer
Older
import { Button } from '@material-ui/core'
import { useClient } from 'cozy-client'
import React, { useCallback, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { updateTermsStatus } from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
import DataShareConsentContent from './DataShareConsentContent'
import LegalNoticeModal from './LegalNoticeModal'
import MinorUpdateContent from './MinorUpdateContent'
import './termsView.scss'
const navigate = useNavigate()
const dispatch = useAppDispatch()
const { termsStatus } = useAppSelector(state => state.ecolyo.global)
const [dataConsentValidation, setDataConsentValidation] =
useState<boolean>(false)
const [openCGUModal, setOpenCGUModal] = useState<boolean>(false)
const [openLegalNoticeModal, setOpenLegalNoticeModal] =
useState<boolean>(false)
const toggleCGUModal = () => {
setOpenCGUModal(prev => !prev)
}
const toggleLegalNoticeModal = () => {
setOpenLegalNoticeModal(prev => !prev)
}
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) {
accepted: true,
versionType: await termsService.getTermsVersionType(),
})
)
navigate('/consumption')
}, [dispatch, client, navigate])
{termsStatus.versionType === 'major' ||
termsStatus.versionType === 'init' ? (
<>
<div className="terms-content">
<DataShareConsentContent />
name="Data-consent-validation"
onChange={handleDataConsentValidation}
checked={dataConsentValidation}
/>
{t('dataShare.validDataConsent')}
</label>
onChange={handleGCUValidate}
checked={GCUValidation}
/>
<div>
<span
onClick={e => {
e.preventDefault()
toggleCGUModal()
}}
dangerouslySetInnerHTML={{ __html: t('dataShare.validCGU') }}
/>
<span
onClick={e => {
e.preventDefault()
toggleLegalNoticeModal()
}}
dangerouslySetInnerHTML={{
__html: t('dataShare.validLegal'),
}}
/>
</div>
</label>
</div>
<div className="terms-footer">
<Button
aria-label={t('dataShare.accessibility.button_accept')}
onClick={handleTermValidate}
disabled={!GCUValidation || !dataConsentValidation}
>
{t('dataShare.button_accept')}
</Button>
</div>
</>
) : (
<>
<div className="terms-content">
</div>
<div className="terms-footer">
<Button
aria-label={t('minorUpdate.button')}
onClick={handleTermValidate}
>
{t('minorUpdate.button')}
</Button>
</div>
</>
)}
<CGUModal open={openCGUModal} handleCloseClick={toggleCGUModal} />
<LegalNoticeModal
open={openLegalNoticeModal}
handleCloseClick={toggleLegalNoticeModal}
/>