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 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 { useTranslation } from "react-i18next";
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 Eula = ({ currentEula, currentUser, acceptEula }) => {
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 markdownCardRef = useRef(null);
const { t } = useTranslation();
const {t} = useTranslation();
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;
if (bottom && !hasEverScrolledToBottom) {
setHasEverScrolledToBottom(true);
@@ -32,11 +32,11 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
}, [hasEverScrolledToBottom, setHasEverScrolledToBottom]);
useEffect(() => {
handleScroll({ target: markdownCardRef.current });
handleScroll({target: markdownCardRef.current});
}, [handleScroll]);
const handleChange = useCallback(() => {
form.validateFields({ validateOnly: true })
form.validateFields({validateOnly: true})
.then(() => setFormReady(hasEverScrolledToBottom))
.catch(() => setFormReady(false));
}, [form, hasEverScrolledToBottom]);
@@ -45,12 +45,12 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
handleChange();
}, [handleChange, hasEverScrolledToBottom, form]);
const onFinish = async ({ acceptTerms, ...formValues }) => {
const onFinish = async ({acceptTerms, ...formValues}) => {
const eulaId = currentEula.id;
const useremail = currentUser.email;
try {
const { accepted_terms, ...otherFormValues } = formValues;
const {accepted_terms, ...otherFormValues} = formValues;
await insertEulaAcceptance({
variables: {
eulaAcceptance: {
@@ -63,7 +63,7 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
});
acceptEula();
} catch (err) {
api.error({
api.error({
message: t('eula.errors.acceptance.message'),
description: t('eula.errors.acceptance.description'),
placement: 'bottomRight',
@@ -99,25 +99,25 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
)}
closable={false}
>
<Card type='inner' className='eula-markdown-card' onScroll={handleScroll} ref={markdownCardRef}>
<div id='markdowndiv' className='eula-markdown-div'>
<Markdown children={currentEula?.content?.replace(/\\n/g, '\n')} />
</div>
<Card type='inner' className='eula-markdown-card' onScroll={handleScroll} ref={markdownCardRef}>
<div id='markdowndiv' className='eula-markdown-div'>
<Markdown children={currentEula?.content?.replace(/\\n/g, '\n')}/>
</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>
<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>
</>
)
}
const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
const EulaFormComponent = ({form, handleChange, onFinish, t}) => (
<Card type='inner' title={t('eula.titles.upper_card')} style={{marginTop: '10px'}}>
<Form id='tosForm' onChange={handleChange} onFinish={onFinish} form={form}>
<Row gutter={24}>
@@ -125,20 +125,28 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
<Form.Item
label={t('eula.labels.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')}
aria-label={t('eula.labels.first_name')} />
aria-label={t('eula.labels.first_name')}/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
label={t('eula.labels.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')}
aria-label={t('eula.labels.last_name')} />
aria-label={t('eula.labels.last_name')}/>
</Form.Item>
</Col>
</Row>
@@ -147,10 +155,13 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
<Form.Item
label={t('eula.labels.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')}
aria-label={t('eula.labels.business_name')} />
<Input placeholder={t('eula.labels.business_name')} aria-label={t('eula.labels.business_name')}/>
</Form.Item>
</Col>
<Col span={12}>
@@ -165,7 +176,7 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
]}
>
<Input placeholder={t('eula.labels.phone_number')}
aria-label={t('eula.labels.phone_number')} />
aria-label={t('eula.labels.phone_number')}/>
</Form.Item>
</Col>
</Row>
@@ -175,7 +186,7 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
label={t('eula.labels.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>
</Col>
<Col span={12}>
@@ -183,8 +194,8 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
label={t('eula.labels.date_accepted')}
name="date_accepted"
rules={[
{ required: true },
{
required: true,
validator: (_, value) => {
if (day(value).isSame(day(), 'day')) {
return Promise.resolve();
@@ -194,8 +205,7 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
},
]}
>
<FormDatePicker onChange={handleChange} onlyToday
aria-label={t('eula.labels.date_accepted')} />
<FormDatePicker onChange={handleChange} onlyToday aria-label={t('eula.labels.date_accepted')}/>
</Form.Item>
</Col>
</Row>
@@ -206,13 +216,13 @@ const EulaFormComponent = ({ form, handleChange, onFinish, t }) => (
valuePropName="checked"
rules={[
{
required: true,
validator: (_, value) =>
value ? Promise.resolve() : Promise.reject(new Error(t('eula.messages.accepted_terms'))),
},
]}
>
<Checkbox
aria-label={t('eula.labels.accepted_terms')}>{t('eula.labels.accepted_terms')}</Checkbox>
<Checkbox aria-label={t('eula.labels.accepted_terms')}>{t('eula.labels.accepted_terms')}</Checkbox>
</Form.Item>
</Col>
</Row>