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

Merged in feature/IO-1828-Front-End-Package-Updates (pull request #1211)

Browse Source 
- Fix empty strings passing validation.
This commit is contained in:
Dave Richer
2024-01-25 18:09:51 +00:00
parent 1c779b05c3 16b0381007
commit ebc75e71d3
1 changed files with 54 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,28 +1,28 @@
import React, { useCallback, useEffect, useRef, useState } from "react"; import React, {useCallback, useEffect, useRef, useState} from "react";
import {Button, Card, Checkbox, Col, Form, Input, Modal, notification, Row} from "antd"; import {Button, Card, Checkbox, Col, Form, Input, Modal, notification, Row} from "antd";
import Markdown from "react-markdown"; import Markdown from "react-markdown";
import { createStructuredSelector } from "reselect"; import {createStructuredSelector} from "reselect";
import { selectCurrentEula, selectCurrentUser } from "../../redux/user/user.selectors"; import {selectCurrentEula, selectCurrentUser} from "../../redux/user/user.selectors";
import { connect } from "react-redux"; import {connect} from "react-redux";
import { FormDatePicker } from "../form-date-picker/form-date-picker.component"; import {FormDatePicker} from "../form-date-picker/form-date-picker.component";
import { INSERT_EULA_ACCEPTANCE } from "../../graphql/user.queries"; import {INSERT_EULA_ACCEPTANCE} from "../../graphql/user.queries";
import { useMutation } from "@apollo/client"; import {useMutation} from "@apollo/client";
import { acceptEula } from "../../redux/user/user.actions"; import {acceptEula} from "../../redux/user/user.actions";
import { useTranslation } from "react-i18next"; import {useTranslation} from "react-i18next";
import day from '../../utils/day'; import day from '../../utils/day';
import './eula.styles.scss'; import './eula.styles.scss';
const Eula = ({ currentEula, currentUser, acceptEula }) => { const Eula = ({currentEula, currentUser, acceptEula}) => {
const [formReady, setFormReady] = useState(false); const [formReady, setFormReady] = useState(false);
const [hasEverScrolledToBottom, setHasEverScrolledToBottom] = useState(false); const [hasEverScrolledToBottom, setHasEverScrolledToBottom] = useState(false);
const [insertEulaAcceptance] = useMutation(INSERT_EULA_ACCEPTANCE); const [insertEulaAcceptance] = useMutation(INSERT_EULA_ACCEPTANCE);
const [form] = Form.useForm(); const [form] = Form.useForm();
const markdownCardRef = useRef(null); const markdownCardRef = useRef(null);
const { t } = useTranslation(); const {t} = useTranslation();
const [api, contextHolder] = notification.useNotification(); const [api, contextHolder] = notification.useNotification();
const handleScroll = useCallback((e) => { const handleScroll = useCallback((e) => {
const bottom = e.target.scrollHeight - 100 <= e.target.scrollTop + e.target.clientHeight; const bottom = e.target.scrollHeight - 100 <= e.target.scrollTop + e.target.clientHeight;
if (bottom && !hasEverScrolledToBottom) { if (bottom && !hasEverScrolledToBottom) {
setHasEverScrolledToBottom(true); setHasEverScrolledToBottom(true);
@@ -32,11 +32,11 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
}, [hasEverScrolledToBottom, setHasEverScrolledToBottom]); }, [hasEverScrolledToBottom, setHasEverScrolledToBottom]);
useEffect(() => { useEffect(() => {
handleScroll({ target: markdownCardRef.current }); handleScroll({target: markdownCardRef.current});
}, [handleScroll]); }, [handleScroll]);
const handleChange = useCallback(() => { const handleChange = useCallback(() => {
form.validateFields({ validateOnly: true }) form.validateFields({validateOnly: true})
.then(() => setFormReady(hasEverScrolledToBottom)) .then(() => setFormReady(hasEverScrolledToBottom))
.catch(() => setFormReady(false)); .catch(() => setFormReady(false));
}, [form, hasEverScrolledToBottom]); }, [form, hasEverScrolledToBottom]);
@@ -45,12 +45,12 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
handleChange(); handleChange();
}, [handleChange, hasEverScrolledToBottom, form]); }, [handleChange, hasEverScrolledToBottom, form]);
const onFinish = async ({ acceptTerms, ...formValues }) => { const onFinish = async ({acceptTerms, ...formValues}) => {
const eulaId = currentEula.id; const eulaId = currentEula.id;
const useremail = currentUser.email; const useremail = currentUser.email;
try { try {
const { accepted_terms, ...otherFormValues } = formValues; const {accepted_terms, ...otherFormValues} = formValues;
await insertEulaAcceptance({ await insertEulaAcceptance({
variables: { variables: {
eulaAcceptance: { eulaAcceptance: {
@@ -63,7 +63,7 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
}); });
acceptEula(); acceptEula();
} catch (err) { } catch (err) {
api.error({ api.error({
message: t('eula.errors.acceptance.message'), message: t('eula.errors.acceptance.message'),
description: t('eula.errors.acceptance.description'), description: t('eula.errors.acceptance.description'),
placement: 'bottomRight', placement: 'bottomRight',
@@ -99,25 +99,25 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
)} )}
closable={false} closable={false}
> >
<Card type='inner' className='eula-markdown-card' onScroll={handleScroll} ref={markdownCardRef}> <Card type='inner' className='eula-markdown-card' onScroll={handleScroll} ref={markdownCardRef}>
<div id='markdowndiv' className='eula-markdown-div'> <div id='markdowndiv' className='eula-markdown-div'>
<Markdown children={currentEula?.content?.replace(/\\n/g, '\n')} /> <Markdown children={currentEula?.content?.replace(/\\n/g, '\n')}/>
</div> </div>
</Card>
<EulaFormComponent form={form} handleChange={handleChange} onFinish={onFinish} t={t}/>
{!hasEverScrolledToBottom && (
<Card className='eula-never-scrolled' type='inner'>
<h3>{t('eula.content.never_scrolled')}</h3>
</Card> </Card>
)}
<EulaFormComponent form={form} handleChange={handleChange} onFinish={onFinish} t={t} />
{!hasEverScrolledToBottom && (
<Card className='eula-never-scrolled' type='inner'>
<h3>{t('eula.content.never_scrolled')}</h3>
</Card>
)}
</Modal> </Modal>
</> </>
) )
} }
const EulaFormComponent = ({ form, handleChange, onFinish, t }) => ( const EulaFormComponent = ({form, handleChange, onFinish, t}) => (
<Card type='inner' title={t('eula.titles.upper_card')} style={{marginTop: '10px'}}> <Card type='inner' title={t('eula.titles.upper_card')} style={{marginTop: '10px'}}>
<Form id='tosForm' onChange={handleChange} onFinish={onFinish} form={form}> <Form id='tosForm' onChange={handleChange} onFinish={onFinish} form={form}>
<Row gutter={24}> <Row gutter={24}>
@@ -125,20 +125,28 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
<Form.Item <Form.Item
label={t('eula.labels.first_name')} label={t('eula.labels.first_name')}
name="first_name" name="first_name"
rules={[{ required: true, message: t('eula.messages.first_name') }]} rules={[{
required: true,
validator: (_, value) =>
value.trim() !== '' ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.first_name'))),
},]}
> >
<Input placeholder={t('eula.labels.first_name')} <Input placeholder={t('eula.labels.first_name')}
aria-label={t('eula.labels.first_name')} /> aria-label={t('eula.labels.first_name')}/>
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
label={t('eula.labels.last_name')} label={t('eula.labels.last_name')}
name="last_name" name="last_name"
rules={[{ required: true, message: t('eula.messages.last_name') }]} rules={[{
required: true,
validator: (_, value) =>
value.trim() !== '' ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.last_name'))),
}]}
> >
<Input placeholder={t('eula.labels.last_name')} <Input placeholder={t('eula.labels.last_name')}
aria-label={t('eula.labels.last_name')} /> aria-label={t('eula.labels.last_name')}/>
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
@@ -147,10 +155,13 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
<Form.Item <Form.Item
label={t('eula.labels.business_name')} label={t('eula.labels.business_name')}
name="business_name" name="business_name"
rules={[{ required: true, message: t('eula.messages.business_name') }]} rules={[{
required: true,
validator: (_, value) =>
value.trim() !== '' ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.business_name'))),
}]}
> >
<Input placeholder={t('eula.labels.business_name')} <Input placeholder={t('eula.labels.business_name')} aria-label={t('eula.labels.business_name')}/>
aria-label={t('eula.labels.business_name')} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={12}> <Col span={12}>
@@ -165,7 +176,7 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
]} ]}
> >
<Input placeholder={t('eula.labels.phone_number')} <Input placeholder={t('eula.labels.phone_number')}
aria-label={t('eula.labels.phone_number')} /> aria-label={t('eula.labels.phone_number')}/>
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
@@ -175,7 +186,7 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
label={t('eula.labels.address')} label={t('eula.labels.address')}
name="address" name="address"
> >
<Input placeholder={t('eula.labels.address')} aria-label={t('eula.labels.address')} /> <Input placeholder={t('eula.labels.address')} aria-label={t('eula.labels.address')}/>
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={12}> <Col span={12}>
@@ -183,8 +194,8 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
label={t('eula.labels.date_accepted')} label={t('eula.labels.date_accepted')}
name="date_accepted" name="date_accepted"
rules={[ rules={[
{ required: true },
{ {
required: true,
validator: (_, value) => { validator: (_, value) => {
if (day(value).isSame(day(), 'day')) { if (day(value).isSame(day(), 'day')) {
return Promise.resolve(); return Promise.resolve();
@@ -194,8 +205,7 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
}, },
]} ]}
> >
<FormDatePicker onChange={handleChange} onlyToday <FormDatePicker onChange={handleChange} onlyToday aria-label={t('eula.labels.date_accepted')}/>
aria-label={t('eula.labels.date_accepted')} />
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
@@ -206,13 +216,13 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
valuePropName="checked" valuePropName="checked"
rules={[ rules={[
{ {
required: true,
validator: (_, value) => validator: (_, value) =>
value ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.accepted_terms'))), value ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.accepted_terms'))),
}, },
]} ]}
> >
<Checkbox <Checkbox aria-label={t('eula.labels.accepted_terms')}>{t('eula.labels.accepted_terms')}</Checkbox>
aria-label={t('eula.labels.accepted_terms')}>{t('eula.labels.accepted_terms')}</Checkbox>
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>