Legal Policy Management

import { useState } from 'react';
import { Modal, Checkbox, CheckboxGroup, Button } from '@cleen/cleen-components';
import { useAgreement, useAcceptAgreement } from '@/hooks/useAgreements';

export function AgreementsAcceptanceModal({ code, onAccepted }) {
  const { agreement, loading } = useAgreement(code);
  const accept = useAcceptAgreement();
  const [accepted, setAccepted] = useState([]);

  if (!agreement) return null;

  return (
    <Modal isOpen size="lg" title={agreement.title}>
      <div className="agreement-body" dangerouslySetInnerHTML={{ __html: agreement.html }} />
      <CheckboxGroup
        value={accepted}
        onChange={setAccepted}
        options={agreement.consents.map((c) => ({ value: c.id, label: c.label }))}
      />
      <Button
        variant="primary"
        disabled={accepted.length < agreement.consents.length}
        loading={loading}
        onClick={() => accept(agreement.versionId).then(onAccepted)}
      >Accept and continue</Button>
    </Modal>
  );
}