Skip to content
Snippets Groups Projects
GCUModal.tsx 2.37 KiB
Newer Older
  • Learn to ignore specific revisions
  • Yoan VALLET's avatar
    Yoan VALLET committed
    import React, { useCallback, useState } from 'react'
    
    import './gcuModal.scss'
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    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'
    
    Yoan VALLET's avatar
    Yoan VALLET committed
    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}>
    
              <GCUContent />
    
    Yoan VALLET's avatar
    Yoan VALLET committed
            </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