admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Eula Progress

Browse Source 
Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-01-19 20:55:15 -05:00
parent 06a8d4257a
commit 6937f33134
21 changed files with 235 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
client/src/components/eula/eula.component.jsx
View File

@@ -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);

3
client/src/components/eula/testData.json
View File

@@ -1,3 +0,0 @@
{
"eula": "# End User License Agreement (EULA)\n## 1. Introduction\n\nThis End User License Agreement (\"EULA\") governs your use of our website and any related services. By using our website, you agree to be bound by the terms of this EULA.\n\n## 2. License Grant\n\nWe grant you a non-exclusive, non-transferable, revocable license to use our website for your personal, non-commercial use.\n\n## 3. Restrictions\n\nYou agree not to:\n\n- Use our website for any illegal or unauthorized purpose\n- Attempt to reverse engineer or otherwise derive the source code of our website\n\n## 4. Termination\n\nWe reserve the right to terminate your license to use our website at any time and for any reason.\n\n## 5. Disclaimer of Warranties\n\nOur website is provided \"as is\" and without any warranty of any kind.\n\n## 6. Limitation of Liability\n\nWe will not be liable for any damages or losses arising from your use of our website.\n\n## 7. Governing Law\n\nThis EULA is governed by the laws of [Your Jurisdiction].\n\n## 8. Changes to this EULA\n\nWe reserve the right to modify this EULA at any time. Your continued use of our website after any such changes constitutes your acceptance of the new EULA.\n\n## 9. Contact Us\n\nIf you have any questions about this EULA, please contact us at [Your Contact Information].\n## 1. Introduction\n\nThis End User License Agreement (\"EULA\") governs your use of our website and any related services. By using our website, you agree to be bound by the terms of this EULA.\n\n## 2. License Grant\n\nWe grant you a non-exclusive, non-transferable, revocable license to use our website for your personal, non-commercial use.\n\n## 3. Restrictions\n\nYou agree not to:\n\n- Use our website for any illegal or unauthorized purpose\n- Attempt to reverse engineer or otherwise derive the source code of our website\n\n## 4. Termination\n\nWe reserve the right to terminate your license to use our website at any time and for any reason.\n\n## 5. Disclaimer of Warranties\n\nOur website is provided \"as is\" and without any warranty of any kind.\n\n## 6. Limitation of Liability\n\nWe will not be liable for any damages or losses arising from your use of our website.\n\n## 7. Governing Law\n\nThis EULA is governed by the laws of [Your Jurisdiction].\n\n## 8. Changes to this EULA\n\nWe reserve the right to modify this EULA at any time. Your continued use of our website after any such changes constitutes your acceptance of the new EULA.\n\n## 9. Contact Us\n\nIf you have any questions about this EULA, please contact us at [Your Contact Information].\n## 1. Introduction\n\nThis End User License Agreement (\"EULA\") governs your use of our website and any related services. By using our website, you agree to be bound by the terms of this EULA.\n\n## 2. License Grant\n\nWe grant you a non-exclusive, non-transferable, revocable license to use our website for your personal, non-commercial use.\n\n## 3. Restrictions\n\nYou agree not to:\n\n- Use our website for any illegal or unauthorized purpose\n- Attempt to reverse engineer or otherwise derive the source code of our website\n\n## 4. Termination\n\nWe reserve the right to terminate your license to use our website at any time and for any reason.\n\n## 5. Disclaimer of Warranties\n\nOur website is provided \"as is\" and without any warranty of any kind.\n\n## 6. Limitation of Liability\n\nWe will not be liable for any damages or losses arising from your use of our website.\n\n## 7. Governing Law\n\nThis EULA is governed by the laws of [Your Jurisdiction].\n\n## 8. Changes to this EULA\n\nWe reserve the right to modify this EULA at any time. Your continued use of our website after any such changes constitutes your acceptance of the new EULA.\n\n## 9. Contact Us\n\nIf you have any questions about this EULA, please contact us at [Your Contact Information]."
}