TermsView.tsx

import { Button } from '@material-ui/core'
import classNames from 'classnames'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React, { Dispatch, useCallback, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import TermsService from 'services/terms.service'
import { AppActionsTypes, AppStore } from 'store'
import { updateTermValidation } from 'store/global/global.actions'
import { decoreText } from 'utils/decoreText'
import CGUModal from './CGUModal'
import DataShareConsentContent from './DataShareConsentContent'
import LegalNoticeModal from './LegalNoticeModal'
import MinorUpdateContent from './MinorUpdateContent'
import './termsView.scss'

const TermsView = () => {
  const { t } = useI18n()
  const client = useClient()
  const dispatch = useDispatch<Dispatch<AppActionsTypes>>()
  const navigate = useNavigate()
  const [GCUValidation, setGCUValidation] = useState<boolean>(false)
  const [dataConsentValidation, setDataConsentValidation] =
    useState<boolean>(false)
  const [openCGUModal, setOpenCGUModal] = useState<boolean>(false)
  const [openLegalNoticeModal, setOpenLegalNoticeModal] =
    useState<boolean>(false)
  const { termsStatus } = useSelector((state: AppStore) => state.ecolyo.global)

  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) {
      dispatch(
        updateTermValidation({
          accepted: true,
          versionType: await termsService.getTermsVersionType(),
        })
      )
    }
    navigate('/consumption')
  }, [dispatch, client, navigate])

  return (
    <div className="terms-wrapper">
      {termsStatus.versionType === 'major' ||
      termsStatus.versionType === 'init' ? (
        <>
          <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'), () => toggleCGUModal())}
                {decoreText(t('dataShare.validLegal'), () =>
                  toggleLegalNoticeModal()
                )}
              </span>
            </label>
          </div>
          <div className="terms-footer">
            <Button
              aria-label={t('dataShare.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('dataShare.button_accept')}
            </Button>
          </div>
        </>
      ) : (
        <>
          <div className="terms-content">
            <MinorUpdateContent />
          </div>
          <div className="terms-footer">
            <Button
              aria-label={t('minorUpdate.button')}
              onClick={handleTermValidate}
              className={'gcu-modal-button'}
              classes={{
                root: 'btn-profile-next rounded',
                label: 'text-16-bold',
              }}
            >
              {t('minorUpdate.button')}
            </Button>
          </div>
        </>
      )}

      <CGUModal open={openCGUModal} handleCloseClick={toggleCGUModal} />
      <LegalNoticeModal
        open={openLegalNoticeModal}
        handleCloseClick={toggleLegalNoticeModal}
      />
    </div>
  )
}

export default TermsView