Skip to content
Snippets Groups Projects
TermsView.tsx 2.92 KiB
Newer Older
  • Learn to ignore specific revisions
  • Guilhem CARRON's avatar
    Guilhem CARRON committed
    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