- Eula Progress

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/eula/eula.component.jsx

@@ -1,37 +1,89 @@
-import React, {useState} from "react";
+import React, {useCallback, useEffect, useRef, useState} from "react";
 import {Button, Card, Checkbox, Col, Form, Input, Modal, 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";
 
-const EULA = require('./testData.json').eula;
 
-/**
- * Returns the EULA component.
- * @returns {Element}
- * @constructor
- */
+const mapStateToProps = createStructuredSelector({
+    currentEula: selectCurrentEula,
+    currentUser: selectCurrentUser,
+});
 
-//REDUXY THIS
-export default function Eula({eulaContentToShow}) {
 
-    const [isModalOpen, setIsModalOpen] = useState(true);
+const mapDispatchToProps = (dispatch) => ({
+    acceptEula: () => dispatch(acceptEula()),
+});
 
-    const handleAccept = (values) => {
-        localStorage.setItem('termsAccepted', 'true');
-        setIsModalOpen(false);
+export function Eula({currentEula, currentUser, acceptEula}) {
+    const [formReady, setFormReady] = useState(false); // [formReady, setFormReady
+    const [hasEverScrolledToBottom, setHasEverScrolledToBottom] = useState(false);
+    const [insertEulaAcceptance] = useMutation(INSERT_EULA_ACCEPTANCE);
+    const [form] = Form.useForm();
+    const markdownDivRef = useRef(null);
 
-        //Insert and Dispatch the action to rechecuk force acceptance.
+    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) {
+            setHasEverScrolledToBottom(true);
+        }
+    };
+
+    const handleChange = useCallback(() => {
+        form.validateFields({
+            validateOnly: true,
+        }).then(() => {
+            setFormReady(hasEverScrolledToBottom);
+        }).catch(() => {
+            setFormReady(false);
+        });
+    }, [form, hasEverScrolledToBottom]);
+
+
+    useEffect(() => {
+        handleChange();
+    }, [handleChange, hasEverScrolledToBottom, form]);
+
 
     return <Modal
         title="Terms and Conditions"
-        width={'90vh'}
-        open={isModalOpen}
+        style={{top: 20}}
+        width={'100vh'}
+        open={currentEula}
         footer={() => (
-            <>
-                <Button form='tosForm' type="primary" htmlType="submit">
-                    Accept
-                </Button>
-            </>
+            <Button style={{width: '100%'}} form='tosForm' type="primary" size='large' htmlType="submit"
+                    disabled={!formReady}>Accept</Button>
         )}
         closable={false}
     >
@@ -40,17 +92,20 @@ export default function Eula({eulaContentToShow}) {
                 maxHeight: '50vh',
                 overflowY: 'auto',
                 backgroundColor: 'lightgray',
-                padding: '0 25px 0 25px'
-            }}>
-                <Markdown children={EULA}/>
+            }} onScroll={handleScroll} ref={markdownDivRef}>
+                <div id='markdowndiv' style={{
+                    padding: '0 10px 0 10px'
+                }}>
+                    <Markdown children={currentEula?.content?.replace(/\\n/g, '\n')}/>
+                </div>
             </Card>
             <Card type='inner' title='Acknowledgement'>
-                <Form id='tosForm' onFinish={handleAccept}>
+                <Form id='tosForm' onChange={handleChange} onFinish={handleAccept} form={form}>
                     <Row gutter={24}>
                         <Col span={12}>
                             <Form.Item
                                 label="First Name"
-                                name="firstName"
+                                name="first_name"
                                 rules={[{required: true, message: 'Please input your first name!'}]}
                             >
                                 <Input placeholder="First Name" aria-label="First Name"/>
@@ -59,7 +114,7 @@ export default function Eula({eulaContentToShow}) {
                         <Col span={12}>
                             <Form.Item
                                 label="Last Name"
-                                name="lastName"
+                                name="last_name"
                                 rules={[{required: true, message: 'Please input your last name!'}]}
                             >
                                 <Input placeholder="Last Name" aria-label="Last Name"/>
@@ -70,7 +125,7 @@ export default function Eula({eulaContentToShow}) {
                         <Col span={12}>
                             <Form.Item
                                 label="Legal Business Name"
-                                name="businessName"
+                                name="business_name"
                                 rules={[{required: true, message: 'Please input your legal business name!'}]}
                             >
                                 <Input placeholder="Legal Business Name" aria-label="Legal Business Name"/>
@@ -79,7 +134,13 @@ export default function Eula({eulaContentToShow}) {
                         <Col span={12}>
                             <Form.Item
                                 label="Phone"
-                                name="phone"
+                                name="phone_number"
+                                rules={[
+                                    {
+                                        pattern: /^(\+\d{1,2}\s?)?1?-?\.?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/,
+                                        message: 'Please enter a valid phone number!'
+                                    }
+                                ]}
                             >
                                 <Input placeholder="Phone" aria-label="Phone"/>
                             </Form.Item>
@@ -97,28 +158,38 @@ export default function Eula({eulaContentToShow}) {
                         <Col span={12}>
                             <Form.Item
                                 label="Date"
-                                name="date"
-                                rules={[{required: true, message: 'Please input the date!'}]}
+                                name="date_accepted"
+                                rules={[{required: true},]}
                             >
-                                <Input type="date" aria-label="Date"/>
+                                <FormDatePicker onChange={handleChange} onlyFuture/>
+                            </Form.Item>
+                        </Col>
+                    </Row>
+                    <Row gutter={24}>
+                        <Col span={24}>
+                            <Form.Item
+                                name="acceptTerms"
+                                valuePropName="checked"
+                                rules={[
+                                    {
+                                        validator: (_, value) =>
+                                            value ? Promise.resolve() : Promise.reject(new Error('You must accept the terms and conditions')),
+                                    },
+                                ]}
+                            >
+                                <Checkbox aria-label="Accept Terms">I accept the terms and conditions</Checkbox>
                             </Form.Item>
                         </Col>
                     </Row>
-                    <Form.Item
-                        name="acceptTerms"
-                        valuePropName="checked"
-                        rules={[
-                            {
-                                validator: (_, value) =>
-                                    value ? Promise.resolve() : Promise.reject(new Error('You must accept the terms and conditions')),
-                            },
-                        ]}
-                    >
-                        <Checkbox aria-label="Accept Terms">I accept the terms and conditions</Checkbox>
-                    </Form.Item>
                 </Form>
             </Card>
+            {!hasEverScrolledToBottom && (
+                <Card style={{textAlign: 'center'}} type='inner'>
+                    <h3>You must scroll to the bottom of the Terms and Conditions before accepting.</h3>
+                </Card>
+            )}
         </Space>
     </Modal>
 }
 
+export default connect(mapStateToProps, mapDispatchToProps)(Eula);