github.com/lauslim12/expert-systems@v0.0.0-20221115131159-018513aad29c/web/src/components/Modal/DisclaimerModal.tsx (about)

     1  import {
     2    Alert,
     3    AlertIcon,
     4    Button,
     5    Checkbox,
     6    Modal,
     7    ModalBody,
     8    ModalContent,
     9    ModalFooter,
    10    ModalHeader,
    11    ModalOverlay,
    12    Text,
    13    VStack,
    14  } from '@chakra-ui/react';
    15  import { memo, useRef, useState } from 'react';
    16  import { useTranslation } from 'react-i18next';
    17  import { AiFillCheckCircle } from 'react-icons/ai';
    18  
    19  /**
    20   * Accepts ChakraUI's basic props: 'isOpen' and 'onClose'.
    21   */
    22  type Props = {
    23    isOpen: boolean;
    24    onClose: () => void;
    25  };
    26  
    27  /**
    28   * This modal is used to render the disclaimer.
    29   *
    30   * @param param - ChakraUI's modal props
    31   * @returns React Functional Component
    32   */
    33  const DisclaimerModal = ({ isOpen, onClose }: Props) => {
    34    const [isAgreeWithTerms, setIsAgreeWithTerms] = useState(false);
    35    const [isResponsible, setIsResponsible] = useState(false);
    36    const focusRef = useRef(null);
    37    const { t } = useTranslation();
    38  
    39    return (
    40      <Modal
    41        isOpen={isOpen}
    42        onClose={onClose}
    43        initialFocusRef={focusRef}
    44        size="5xl"
    45        closeOnEsc={false}
    46        closeOnOverlayClick={false}
    47      >
    48        <ModalOverlay />
    49  
    50        <ModalContent ref={focusRef}>
    51          <ModalHeader>{t('disclaimer.title')}</ModalHeader>
    52  
    53          <ModalBody>
    54            <VStack as="article" align="stretch">
    55              <Alert as="section" status="info" variant="left-accent">
    56                <AlertIcon />
    57                {t('disclaimer.alert')}
    58              </Alert>
    59  
    60              <VStack as="section" align="start" spacing={4}>
    61                <Text>{t('disclaimer.initial')}</Text>
    62                <Text>{t('disclaimer.privacy')}</Text>
    63                <Text as="strong">{t('disclaimer.warning')}</Text>
    64                <Text as="strong">{t('disclaimer.license')}</Text>
    65                <Text>{t('disclaimer.agreement')}</Text>
    66              </VStack>
    67  
    68              <VStack as="section" align="start">
    69                <Checkbox
    70                  colorScheme="green"
    71                  isChecked={isAgreeWithTerms}
    72                  isRequired
    73                  onChange={({ target: { checked } }) =>
    74                    setIsAgreeWithTerms(checked)
    75                  }
    76                >
    77                  {t('disclaimer.understand')}
    78                </Checkbox>
    79  
    80                <Checkbox
    81                  colorScheme="green"
    82                  isChecked={isResponsible}
    83                  isRequired
    84                  onChange={({ target: { checked } }) =>
    85                    setIsResponsible(checked)
    86                  }
    87                >
    88                  {t('disclaimer.responsibility')}
    89                </Checkbox>
    90              </VStack>
    91            </VStack>
    92          </ModalBody>
    93  
    94          <ModalFooter>
    95            <Button
    96              colorScheme="green"
    97              leftIcon={<AiFillCheckCircle />}
    98              isDisabled={!isResponsible || !isAgreeWithTerms}
    99              onClick={onClose}
   100            >
   101              {t('disclaimer.close')}
   102            </Button>
   103          </ModalFooter>
   104        </ModalContent>
   105      </Modal>
   106    );
   107  };
   108  
   109  export default memo(DisclaimerModal);