From 2ada4ac44b2d0cc81dd35d7c4aff0b884db159b1 Mon Sep 17 00:00:00 2001 From: Dave Richer Date: Fri, 19 Jan 2024 22:27:03 -0500 Subject: [PATCH] - Eula finished Signed-off-by: Dave Richer --- client/src/components/eula/eula.component.jsx | 371 ++++++++++-------- client/src/components/eula/eula.styles.scss | 21 + client/src/translations/en_us/common.json | 35 ++ client/src/translations/es/common.json | 35 ++ client/src/translations/fr/common.json | 35 ++ 5 files changed, 327 insertions(+), 170 deletions(-) create mode 100644 client/src/components/eula/eula.styles.scss diff --git a/client/src/components/eula/eula.component.jsx b/client/src/components/eula/eula.component.jsx index 63337d184..3dca72951 100644 --- a/client/src/components/eula/eula.component.jsx +++ b/client/src/components/eula/eula.component.jsx @@ -1,58 +1,27 @@ -import React, {useCallback, useEffect, useRef, useState} from "react"; -import {Button, Card, Checkbox, Col, Form, Input, Modal, Row, Space} from "antd"; +import React, { useCallback, useEffect, useRef, useState } from "react"; +import {Button, Card, Checkbox, Col, Form, Input, Modal, notification, Row, Space} from "antd"; import Markdown from "react-markdown"; -import {createStructuredSelector} from "reselect"; -import {selectCurrentEula, selectCurrentUser} from "../../redux/user/user.selectors"; -import {connect} from "react-redux"; -import {FormDatePicker} from "../form-date-picker/form-date-picker.component"; -import {INSERT_EULA_ACCEPTANCE} from "../../graphql/user.queries"; -import {useMutation} from "@apollo/client"; -import {acceptEula} from "../../redux/user/user.actions"; +import { createStructuredSelector } from "reselect"; +import { selectCurrentEula, selectCurrentUser } from "../../redux/user/user.selectors"; +import { connect } from "react-redux"; +import { FormDatePicker } from "../form-date-picker/form-date-picker.component"; +import { INSERT_EULA_ACCEPTANCE } from "../../graphql/user.queries"; +import { useMutation } from "@apollo/client"; +import { acceptEula } from "../../redux/user/user.actions"; +import { useTranslation } from "react-i18next"; +import day from '../../utils/day'; +import './eula.styles.scss'; -const mapStateToProps = createStructuredSelector({ - currentEula: selectCurrentEula, - currentUser: selectCurrentUser, -}); - - -const mapDispatchToProps = (dispatch) => ({ - acceptEula: () => dispatch(acceptEula()), -}); - -export function Eula({currentEula, currentUser, acceptEula}) { - const [formReady, setFormReady] = useState(false); // [formReady, setFormReady +const Eula = ({ currentEula, currentUser, acceptEula }) => { + const [formReady, setFormReady] = useState(false); const [hasEverScrolledToBottom, setHasEverScrolledToBottom] = useState(false); const [insertEulaAcceptance] = useMutation(INSERT_EULA_ACCEPTANCE); const [form] = Form.useForm(); - const markdownDivRef = useRef(null); + const markdownCardRef = useRef(null); + const { t } = useTranslation(); + const [api, contextHolder] = notification.useNotification(); - const handleAccept = async ({acceptTerms, ...formValues}) => { - - const eulaId = currentEula.id; - const useremail = currentUser.email; - - try { - await insertEulaAcceptance({ - variables: { - eulaAcceptance: { - eulaid: eulaId, - useremail, - ...formValues, - date_accepted: new Date(), - } - } - }); - - acceptEula(); - } catch (err) { - // Pop notification with error, pop console - console.error(err); - } -//R - // setIsModalOpen(false); - //Insert and Dispatch the action to recheck force acceptance. - }; const handleScroll = (e) => { const bottom = e.target.scrollHeight - 100 <= e.target.scrollTop + e.target.clientHeight; if (bottom && !hasEverScrolledToBottom) { @@ -61,135 +30,197 @@ export function Eula({currentEula, currentUser, acceptEula}) { }; const handleChange = useCallback(() => { - form.validateFields({ - validateOnly: true, - }).then(() => { - setFormReady(hasEverScrolledToBottom); - }).catch(() => { - setFormReady(false); - }); + form.validateFields({ validateOnly: true }) + .then(() => setFormReady(hasEverScrolledToBottom)) + .catch(() => setFormReady(false)); }, [form, hasEverScrolledToBottom]); - useEffect(() => { handleChange(); }, [handleChange, hasEverScrolledToBottom, form]); + const onFinish = async ({ acceptTerms, ...formValues }) => { + const eulaId = currentEula.id; + const useremail = currentUser.email; - return ( - - )} - closable={false} - > - - -
- -
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - value ? Promise.resolve() : Promise.reject(new Error('You must accept the terms and conditions')), - }, - ]} - > - I accept the terms and conditions - - - -
- - {!hasEverScrolledToBottom && ( - -

You must scroll to the bottom of the Terms and Conditions before accepting.

- - )} - - + try { + const { accepted_terms, ...otherFormValues } = formValues; + await insertEulaAcceptance({ + variables: { + eulaAcceptance: { + eulaid: eulaId, + useremail, + ...otherFormValues, + date_accepted: new Date(), + } + } + }); + acceptEula(); + } catch (err) { + api.error({ + message: t('eula.errors.acceptance.message'), + description: t('eula.errors.acceptance.description'), + placement: 'bottomRight', + duration: 5000, + + }); + console.log(`${t('eula.errors.acceptance.message')}`); + console.dir({ + message: err.message, + stack: err.stack, + }); + } + }; + + return ( + <> + {contextHolder} + ( +