TermsView.tsx

import { Button } from '@material-ui/core'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import React, { useCallback, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import TermsService from 'services/terms.service'
import { updateTermsStatus } from 'store/global/global.slice'
import { useAppDispatch, useAppSelector } from 'store/hooks'
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 navigate = useNavigate()
  const dispatch = useAppDispatch()
  const { termsStatus } = useAppSelector(state => state.ecolyo.global)
  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 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(
        updateTermsStatus({
          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="inline">
              <input
                type="checkbox"
                name="Data-consent-validation"
                className="inputCheckbox"
                onChange={handleDataConsentValidation}
                checked={dataConsentValidation}
              />
              {t('dataShare.validDataConsent')}
            </label>
            <label className="inline">
              <input
                id="gcu"
                type="checkbox"
                name="GCU-validation"
                className="inputCheckbox"
                onChange={handleGCUValidate}
                checked={GCUValidation}
              />
              <div>
                <span>{t('dataShare.validCGU')}</span>
                <Button
                  size="small"
                  className="btnText"
                  onClick={toggleCGUModal}
                >
                  {t('dataShare.validCGU_button')}
                </Button>

                <span>{t('dataShare.validLegal')}</span>
                <Button
                  size="small"
                  className="btnText"
                  onClick={toggleLegalNoticeModal}
                >
                  {t('dataShare.validLegal_button')}
                </Button>
                <span>{t('dataShare.validLegal2')}</span>
              </div>
            </label>
          </div>
          <div className="terms-footer">
            <Button
              aria-label={t('dataShare.accessibility.button_accept')}
              onClick={handleTermValidate}
              disabled={!GCUValidation || !dataConsentValidation}
              className="btnPrimary"
            >
              {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="btnPrimary"
            >
              {t('minorUpdate.button')}
            </Button>
          </div>
        </>
      )}

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

export default TermsView