Newer
Older
import React, { useCallback, useState } from 'react'
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 GCUContent from 'components/GCU/GCUContent'
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
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import arrowIcon from 'assets/icons/visu/gcu/gcu-arrow.svg'
import { DateTime } from 'luxon'
const GCUModal: React.FC = () => {
const { t } = useI18n()
const dispatch = useDispatch()
const [isBottom, setIsBottom] = useState<boolean>(false)
const [bottomReached, setBottomReached] = useState<boolean>(false)
const handleScroll = (event: React.UIEvent<HTMLElement>) => {
const target = event.currentTarget
if (target.scrollHeight - target.scrollTop === target.clientHeight) {
setIsBottom(true)
setBottomReached(true)
} else {
setIsBottom(false)
}
}
const handleGCUValidate = useCallback(() => {
dispatch(
updateProfile({
GCUApprovalDate: DateTime.local().setZone('utc', {
keepLocalTime: true,
}),
})
)
}, [dispatch])
return (
<Dialog
open={true}
disableBackdropClick
disableEscapeKeyDown
aria-labelledby={'accessibility-title'}
classes={{
root: 'modal-root',
paper: 'modal-paper-full-screen',
}}
>
<div id={'accessibility-title'}>
{t('gcu_modal.accessibility.window_title')}
</div>
<div className="gcu-modal-root">
<div className="gcu-modal-content" onScroll={handleScroll}>
</div>
<div className="gcu-modal-footer">
{!isBottom && (
<StyledIcon className="gcu-modal-icon" icon={arrowIcon} size={27} />
)}
<Button
aria-label={t('gcu_modal.accessibility.button_accept')}
onClick={handleGCUValidate}
className={'gcu-modal-button'}
disabled={!bottomReached}
classes={{
root: 'btn-profile-next rounded',
label: 'text-16-normal',
}}
>
{t('gcu.button_accept')}
</Button>
</div>
</div>
</Dialog>
)
}
export default GCUModal